Question

我正在登录一个应用程序，并且我创建了2个防护措施，用于在登录之后和之前进行页面路由。我在CanActivate内部调用的方法恰好抛出了我想要的东西。 true，如果access_token存在，false如果不存在。问题是即使登录，我也无法重定向到所需的页面。

这是我得到的错误：

错误错误：未捕获（承诺）：错误：无效的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

您有几个正确的错误

正确的导入语句

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

还更改canActivate

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

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

Angular Guard在页面路由中不起作用

1 个答案: