Angular 守卫在页面路由中不工作

Question

我在一个应用程序的登录中工作，我已经为页面路由创建了 2 个守卫，它们应该在登录之后和之前进行。我在 CanActivate 中调用的方法完全符合我的要求。 true 如果 access_token 存在，false 如果不存在。问题是即使我已登录，我也没有被重定向到我想要的页面。

这是我遇到的错误：

ERROR Error: Uncaught (in promise): Error: Invalid CanActivate guard Error: Invalid CanActivate guard

在登录之前保护之后的事情：

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { TokenService } from './token.service';

@Injectable({
  providedIn: 'root'
})
export class BeforeLoginService implements CanActivate {
  path: ActivatedRouteSnapshot[];
  route: ActivatedRouteSnapshot;


  CanActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log(this.Token.loggedIn());
    return this.Token.loggedIn();
  }

  constructor(private Token: TokenService) { }
}

守卫登录后的事情：

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router/src/utils/preactivation';
import { TokenService } from './token.service';
import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AfterLoginService implements CanActivate {
  path: ActivatedRouteSnapshot[];
  route: ActivatedRouteSnapshot;


  CanActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
    console.log(this.Token.loggedIn());
    return !this.Token.loggedIn();
  }

  constructor(private Token: TokenService) { }
}

我这部分业务的路由模块：

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

import { UserBaseComponent } from './users/components/user-base/user-base.component';
import { StaffBaseComponent } from './staffs/components/staff-base/staff-base.component';
import { IndexComponent } from './index/index.component';
import { LoginComponent } from '../core/components/login/login.component';
import { AfterLoginService } from '../core/services/after-login.service';
import { BeforeLoginService} from '../core/services/before-login.service';

const routes: Routes = [
  {
    path: 'administration',
    component: IndexComponent,
    children: [
      {path: 'users', component: UserBaseComponent, canActivate: [AfterLoginService]},
      {path: 'staffs', component: StaffBaseComponent, canActivate: [AfterLoginService]}
    ],
  }
];

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

而且我已经确保提供者中包含守卫。

Answer 1

有几处错误你改正了

正确的导入语句

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

同时在 canActivate

要重定向到 /login 页面，您必须使用 router 导航方法手动重定向到 /login 页面。重定向不会自动发生。

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
   const isLogin = this.Token.loggedIn();
   if (!isLogin) this.router.navigate(['/login']) 
   return isLogin;
}

Angular 守卫在页面路由中不工作

Angular guards not working in the routing of pages

jwt

angular

angular-router-guards