Angular перенаправление на страницу входа

Я пришел из мира Asp.Net MVC, где пользователи, пытающиеся получить доступ к странице, которую они не авторизовали, автоматически перенаправляются на страницу входа.

Я пытаюсь воспроизвести это поведение на Angular. Я наткнулся на декоратор @CanActivate, но это приводит к тому, что компонент вообще не отображается, нет перенаправления.

У меня следующий вопрос:

• Предоставляет ли Angular способ добиться такого поведения?
• Если да, то как? Это хорошая практика?
• Если нет, что было бы лучше всего для обработки авторизации пользователей в Angular?

Обновление: я опубликовал полный скелет проекта Angular 2 с интеграцией OAuth2 на Github, который показывает указанную ниже директиву в действии.

Один из способов сделать это - использовать расширение directive. В отличие от Angular 2 components, которые в основном представляют собой новые HTML-теги (со связанным кодом), которые вы вставляете на свою страницу, атрибутивная директива - это атрибут, который вы помещаете в тег, который вызывает определенное поведение. Документы здесь .

Наличие вашего настраиваемого атрибута приводит к тому, что что-то происходит с компонентом (или элементом HTML), в который вы поместили директиву. Рассмотрим эту директиву, которую я использую для моего текущего приложения Angular2 / OAuth2:

import {Directive, OnDestroy} from 'angular2/core';
import {AuthService} from '../services/auth.service';
import {ROUTER_DIRECTIVES, Router, Location} from "angular2/router";

@Directive({
    selector: '[protected]'
})
export class ProtectedDirective implements OnDestroy {
    private sub:any = null;

    constructor(private authService:AuthService, private router:Router, private location:Location) {
        if (!authService.isAuthenticated()) {
            this.location.replaceState('/'); // clears browser history so they can't navigate with back button
            this.router.navigate(['PublicPage']);
        }

        this.sub = this.authService.subscribe((val) => {
            if (!val.authenticated) {
                this.location.replaceState('/'); // clears browser history so they can't navigate with back button
                this.router.navigate(['LoggedoutPage']); // tells them they've been logged out (somehow)
            }
        });
    }

    ngOnDestroy() {
        if (this.sub != null) {
            this.sub.unsubscribe();
        }
    }
}

Это использует службу аутентификации, которую я написал, чтобы определить, вошел ли уже пользователь в систему, а также подписывается на событие аутентификации, чтобы оно могло выгнать пользователя, если он или она выйдет из системы или истечет время ожидания.

Вы могли бы сделать то же самое. Вы бы создали такую ​​директиву, как моя, которая проверяет наличие необходимого файла cookie или другой информации о состоянии, которая указывает, что пользователь аутентифицирован. Если у них нет тех флагов, которые вы ищете, перенаправьте пользователя на свою главную общедоступную страницу (как я) или на ваш сервер OAuth2 (или что-то еще). Вы бы поместили этот атрибут директивы на любой компонент, который необходимо защитить. В этом случае он может называться protectedкак в директиве, которую я вставил выше.

<members-only-info [protected]></members-only-info>

Затем вы захотите перейти / перенаправить пользователя в представление входа в ваше приложение и обработать там аутентификацию. Вам придется изменить текущий маршрут на тот, который вы хотите сделать. Итак, в этом случае вы должны использовать внедрение зависимостей, чтобы получить объект Router в функции вашей директивы, constructor()а затем использовать этот navigate()метод для отправки пользователя на страницу входа в систему (как в моем примере выше).

Это предполагает, что у вас есть серия маршрутов где-то, управляющих <router-outlet>тегом, который выглядит примерно так, например:

@RouteConfig([
    {path: '/loggedout', name: 'LoggedoutPage', component: LoggedoutPageComponent, useAsDefault: true},
    {path: '/public', name: 'PublicPage', component: PublicPageComponent},
    {path: '/protected', name: 'ProtectedPage', component: ProtectedPageComponent}
])

Если вместо этого вам нужно перенаправить пользователя на внешний URL-адрес, такой как ваш сервер OAuth2, тогда ваша директива будет делать что-то вроде следующего:

window.location.href="https://myserver.com/oauth2/authorize?redirect_uri=http://myAppServer.com/myAngular2App/callback&response_type=code&client_id=clientId&scope=my_scope

Вот обновленный пример с использованием Angular 4 (также совместим с Angular 5-8)

Маршруты с домашним маршрутом, защищенным AuthGuard

import { Routes, RouterModule } from '@angular/router';

import { LoginComponent } from './login/index';
import { HomeComponent } from './home/index';
import { AuthGuard } from './_guards/index';

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },

    // home route protected by auth guard
    { path: '', component: HomeComponent, canActivate: [AuthGuard] },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

AuthGuard перенаправляет на страницу входа, если пользователь не вошел в систему

Обновлено для передачи исходного URL-адреса в параметрах запроса на страницу входа

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

        // not logged in so redirect to login page with the return url
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
    }
}

Полный пример и рабочую демонстрацию вы можете посмотреть в этом посте.

Использование с финальным маршрутизатором

С введением нового маршрутизатора стало проще охранять маршруты. Вы должны определить охранник, который действует как служба, и добавить его в маршрут.

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { UserService } from '../../auth';

@Injectable()
export class LoggedInGuard implements CanActivate {
  constructor(user: UserService) {
    this._user = user;
  }

  canActivate() {
    return this._user.isLoggedIn();
  }
}

Теперь передайте в LoggedInGuardмаршрут и также добавьте его в providersмассив модуля.

import { LoginComponent } from './components/login.component';
import { HomeComponent } from './components/home.component';
import { LoggedInGuard } from './guards/loggedin.guard';

const routes = [
    { path: '', component: HomeComponent, canActivate: [LoggedInGuard] },
    { path: 'login', component: LoginComponent },
];

Объявление модуля:

@NgModule({
  declarations: [AppComponent, HomeComponent, LoginComponent]
  imports: [HttpModule, BrowserModule, RouterModule.forRoot(routes)],
  providers: [UserService, LoggedInGuard],
  bootstrap: [AppComponent]
})
class AppModule {}

Подробное сообщение в блоге о том, как это работает с финальной версией: https://medium.com/@blacksonic86/angular-2-authentication-revisited-611bf7373bf9

Использование устаревшего маршрутизатора

Более надежным решением является расширение RouterOutletи при активации проверки маршрута, если пользователь вошел в систему. Таким образом, вам не нужно копировать и вставлять свою директиву в каждый компонент. Кроме того, перенаправление на основе подкомпонента может ввести в заблуждение.

@Directive({
  selector: 'router-outlet'
})
export class LoggedInRouterOutlet extends RouterOutlet {
  publicRoutes: Array;
  private parentRouter: Router;
  private userService: UserService;

  constructor(
    _elementRef: ElementRef, _loader: DynamicComponentLoader,
    _parentRouter: Router, @Attribute('name') nameAttr: string,
    userService: UserService
  ) {
    super(_elementRef, _loader, _parentRouter, nameAttr);

    this.parentRouter = _parentRouter;
    this.userService = userService;
    this.publicRoutes = [
      '', 'login', 'signup'
    ];
  }

  activate(instruction: ComponentInstruction) {
    if (this._canActivate(instruction.urlPath)) {
      return super.activate(instruction);
    }

    this.parentRouter.navigate(['Login']);
  }

  _canActivate(url) {
    return this.publicRoutes.indexOf(url) !== -1 || this.userService.isLoggedIn()
  }
}

Это UserServiceозначает место, где находится ваша бизнес-логика, независимо от того, вошел ли пользователь в систему или нет. Вы можете легко добавить его с помощью DI в конструкторе.

Когда пользователь переходит на новый URL-адрес на вашем веб-сайте, вызывается метод активации с текущей инструкцией. Из него вы можете получить URL-адрес и решить, разрешено это или нет. Если не просто перенаправить на страницу входа.

И последнее, что осталось сделать, чтобы он заработал, - это передать его нашему основному компоненту вместо встроенного.

@Component({
  selector: 'app',
  directives: [LoggedInRouterOutlet],
  template: template
})
@RouteConfig(...)
export class AppComponent { }

Это решение нельзя использовать с @CanActiveдекоратором жизненного цикла, потому что, если переданная ему функция разрешает false, метод активации RouterOutletне будет вызываться.

Также написал подробный пост в блоге об этом: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492

Пожалуйста, не перекрывайте выход маршрутизатора! Это кошмар с последней версией роутера (3.0 beta).

Вместо этого используйте интерфейсы CanActivate и CanDeactivate и установите класс как canActivate / canDeactivate в определении маршрута.

Как это:

{ path: '', component: Component, canActivate: [AuthGuard] },

Класс:

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(protected router: Router, protected authService: AuthService)
    {

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

        if (state.url !== '/login' && !this.authService.isAuthenticated()) {
            this.router.navigate(['/login']);
            return false;
        }

        return true;
    }
}

См. Также: https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard.

Следуя замечательным ответам выше, я также хотел бы CanActivateChild: охранять дочерние маршруты. Его можно использовать для добавления guardдочерним маршрутам, полезным для таких случаев, как ACL.

Это выглядит так

src / app / auth-guard.service.ts (отрывок)

import { Injectable }       from '@angular/core';
import {
  CanActivate, Router,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  CanActivateChild
}                           from '@angular/router';
import { AuthService }      from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private authService: AuthService, private router:     Router) {}

  canActivate(route: ActivatedRouteSnapshot, state:    RouterStateSnapshot): boolean {
    let url: string = state.url;
    return this.checkLogin(url);
  }

  canActivateChild(route: ActivatedRouteSnapshot, state:  RouterStateSnapshot): boolean {
    return this.canActivate(route, state);
  }

/* . . . */
}

src / app / admin / admin-routing.module.ts (отрывок)

const adminRoutes: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          { path: 'heroes', component: ManageHeroesComponent },
          { path: '', component: AdminDashboardComponent }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(adminRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AdminRoutingModule {}

Это взято из https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Обратитесь к этому коду, файлу auth.ts

import { CanActivate } from '@angular/router';
import { Injectable } from '@angular/core';
import {  } from 'angular-2-local-storage';
import { Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(public localStorageService:LocalStorageService, private router: Router){}
canActivate() {
// Imaginary method that is supposed to validate an auth token
// and return a boolean
var logInStatus         =   this.localStorageService.get('logInStatus');
if(logInStatus == 1){
    console.log('****** log in status 1*****')
    return true;
}else{
    console.log('****** log in status not 1 *****')
    this.router.navigate(['/']);
    return false;
}


}

}
// *****And the app.routes.ts file is as follow ******//
      import {  Routes  } from '@angular/router';
      import {  HomePageComponent   } from './home-page/home- page.component';
      import {  WatchComponent  } from './watch/watch.component';
      import {  TeachersPageComponent   } from './teachers-page/teachers-page.component';
      import {  UserDashboardComponent  } from './user-dashboard/user- dashboard.component';
      import {  FormOneComponent    } from './form-one/form-one.component';
      import {  FormTwoComponent    } from './form-two/form-two.component';
      import {  AuthGuard   } from './authguard';
      import {  LoginDetailsComponent } from './login-details/login-details.component';
      import {  TransactionResolver } from './trans.resolver'
      export const routes:Routes    =   [
    { path:'',              component:HomePageComponent                                                 },
    { path:'watch',         component:WatchComponent                                                },
    { path:'teachers',      component:TeachersPageComponent                                         },
    { path:'dashboard',     component:UserDashboardComponent,       canActivate: [AuthGuard],   resolve: { dashboardData:TransactionResolver } },
    { path:'formone',       component:FormOneComponent,                 canActivate: [AuthGuard],   resolve: { dashboardData:TransactionResolver } },
    { path:'formtwo',       component:FormTwoComponent,                 canActivate: [AuthGuard],   resolve: { dashboardData:TransactionResolver } },
    { path:'login-details', component:LoginDetailsComponent,            canActivate: [AuthGuard]    },

]; 

1. Create a guard as seen below. 2. Install ngx-cookie-service to get cookies returned by external SSO. 3. Create ssoPath in environment.ts (SSO Login redirection). 4. Get the state.url and use encodeURIComponent.

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from 
  '@angular/router';
import { CookieService } from 'ngx-cookie-service';
import { environment } from '../../../environments/environment.prod';

@Injectable()
export class AuthGuardService implements CanActivate {
  private returnUrl: string;
  constructor(private _router: Router, private cookie: CookieService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.cookie.get('MasterSignOn')) {
      return true;
    } else {
      let uri = window.location.origin + '/#' + state.url;
      this.returnUrl = encodeURIComponent(uri);      
      window.location.href = environment.ssoPath +  this.returnUrl ;   
      return false;      
    }
  }
}