实施 Angular 8 Route (Auth) Guards 时出错

Question

所以我试图为我的 web 应用程序实现 Route Guards，但遇到了很多错误。我做错了什么？

我的 webapp 由多个路由组成，其中一个是仪表板，需要通过登录组件进行保护。这正是我尝试实施但失败的方法。我的登录组件从后端生成一个 JWT 令牌并将其添加到 LocalStorage 中（以对象“令牌”的格式：“”）。

我的dashboard.component.ts：

import { Component, OnInit } from '@angular/core';
import { User } from '../models/user.model';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  user: User;

  constructor() { }

  ngOnInit() {
  }

  canDeactivate(): Promise<any> | boolean {
    if (localStorage.getItem('currentUserToken') === 'token') {
            return (true);
          } else {
            return (false);
          }

}
}

我的 auth.guard.ts：

import {Injectable} from '@angular/core';
import {ActivatedRoute, ActivatedRouteSnapshot, CanActivate, CanLoad, Route, Router, RouterStateSnapshot} from '@angular/router';
@Injectable()
export class AuthGuard implements CanActivate, CanLoad {
    constructor(private router: Router) {
    }
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        return this.checkToken();
    }
    canLoad(route: Route): boolean {
        return this.checkToken();
    }
    checkToken() {
        if (localStorage.getItem('currentUserToken')) {
            return true;
        } else {
            this.router.navigateByUrl('/avior/login');
            return false;
        }
    }
}

我的 can-exit.guard.ts：

import {Injectable} from '@angular/core';
import {CanDeactivate} from '@angular/router';
import {CanExit} from './canExit';
@Injectable()
export class CanExitGuard implements CanDeactivate<CanExit> {
 canDeactivate(component: CanExit) {
   if (component.canDeactivate) {
     return component.canDeactivate();
   }
   return true;
 }
}

我的 canExit.ts：

import {Observable} from 'rxjs';
export interface CanExit {
 canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

浏览器中的错误是：

DashboardComponent.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'id' of undefined
DashboardComponent.ngfactory.js? [sm]:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}
ERROR TypeError: Cannot read property 'id' of undefined
ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 1, nodeDef: {…}, elDef: {…}, elView: {…}}

更新： StackBlitz： https://stackblitz.com/edit/angular-v9u7nw?file=src%2Fapp%2Fapp.routing.ts

Answer 1

为了将用户重定向到登录组件，您需要在路由路径中定义路由器保护。我在这里不是为这个用例设置令牌部分。你可以找到完整的工作StackBlitz Link here。如果你直接重定向到/dashboard，如果用户没有登录，auth-guard 会重定向到/login。

你的 auth-guard 是..

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

   if(this.authService.isUserLoggedIn()){
       return true;
   }else{
      this.router.navigate(['/login'],{relativeTo: this.activatedRouter});
        return false;
    }
}

您的身份验证服务如下所示..

 isAuthenticated(username: string, password: string): Observable <boolean>{
return this.getAllUsers().pipe(
  map(users => {
    let user = users.find( user => (user.username === username) && (user.password === password) );
        console.log(user)
        if (user) {
          this.isLoggedin = true;
          this.loggedInUser = user;
        } else {
          this.isLoggedin = false;
        }
        return this.isLoggedin;
  })
)
}

您的应用路由模块是..

const routes: Routes = [{path: 'login', component: LoginComponent},
                    {path: '', redirectTo: 'login',  pathMatch: 'full'},
                    {path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard]}
                    ];

您的登录提交方法..

this.authService.isAuthenticated(this.loginForm.get('username').value,this.loginForm.get('password').value).subscribe(authenticated =>{
    if (authenticated){
      let url = this.authService.getRedirectUrl();
       this.router.navigate([url]);
    }
});