Angular 防护在页面路由中不起作用

Question

我正在登录一个应用程序，我已经为登录之后和之前的页面路由创建了 2 个守卫。我在 CanActivate 中调用的方法正是我想要的。 true 如果access_token 存在，false 如果不存在。问题是即使我已登录，我也不会被重定向到我想要的页面。

这是我得到的错误：

ERROR 错误：未捕获（承诺中）：错误：CanActivate 保护无效 错误：CanActivate 保护无效

在登录之前注意之后发生的事情：

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

你有几个错误是正确的

1. 正确的导入语句

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

2. 还要更改canActivate中的大小写

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

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