升级到 angular 5 后 canActivate 不工作

Question

我正在升级到 angular 5 我的项目，我不明白为什么激活不再起作用：

//package.json:

dependencies": {
"@angular/animations": "~5.1.3",
"@angular/cdk": "5.0.3",
"@angular/common": "~5.1.3",
"@angular/compiler": "~5.1.3",
"@angular/core": "~5.1.3",
"@angular/flex-layout": "2.0.0-beta.12",
"@angular/forms": "~5.1.3",
"@angular/http": "~5.1.3",
"@angular/material": "5.0.3",
"@angular/platform-browser": "~5.1.3",
"@angular/platform-browser-dynamic": "~5.1.3",
"@angular/router": "~5.1.3",
"@ngx-translate/core": "^9.0.2",
"amazon-cognito-identity-js": "^1.25.0",
"angular-in-memory-web-api": "^0.5.2",
"angular2-highcharts": "^0.5.5",
"core-js": "^2.4.1",
"highcharts-export-csv": "git+https://github.com/highcharts/export-csv.git",
"leaflet": "^1.2.0",
"leaflet-draw": "^0.4.12",
"leaflet.markercluster": "^1.1.0",
"ng2-dnd": "^4.2.0",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"
},

我的路由和模块文件：

//app.routing
const APP_ROUTES: Routes = [
{
    path: '',
    canActivate: [LoggedInGuard],
    children: [
        {path: '', loadChildren: 'app/myModule/myModule.module#MyModule', pathMatch: 'full'}
    ]
},
{path: '**', redirectTo: ''}
];
//app.module
providers: [
LoggedInGuard 
],

我的模块中的路由文件：

myModule.routing

const MYMODULE_ROUTES: Routes = [

   {path: '', component: MyModuleComponent},
];

问题是从未调用过 LoggedInGuard，我不明白我错过了什么

我添加了我的 loggedInGuard 函数，因为@Rowel de Guzman 评论

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

@Injectable()
export class LoggedInGuard implements CanActivate {
   constructor(private router: Router, private userService: UserService) {
       console.log("constructor");
   }

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
 console.log("inside canActivate!");
   if (state.url !== '/login') {
  this.router.navigate(['/login']);
  return false;
}

return true;

} }

Answer 1

{
    path: '',
    canActivate: [LoggedInGuard],
    children: [
        {path: '', loadChildren: 'app/myModule/myModule.module#MyModule', pathMatch: 'full'}
    ]
}

这只保护一条路线。你应该改用这个：

{
    path: '',
    canActivateChild: [LoggedInGuard],
    children: [
        {path: '', loadChildren: 'app/myModule/myModule.module#MyModule', pathMatch: 'full'}
    ]
}

这将保护每个子路由，而不仅仅是父路由。

Answer 2

我找到了，问题出在myModule.routing，我写的是完整的路由而不是亲戚，因为它没有canActivate保护所以通过了。

感谢您的宝贵时间！

Answer 3

它适用于 angular 5。示例：

import {AuthGuard} from'/services/authguard.service.ts';

{
    path: '/myPath',
    canActivate: [AuthGuard],
    component:myComponent,
    data:{}

}

升级到 angular 5 后 canActivate 不工作

canActivate is not working after upgrading to angular 5

angular

angular-routing

angular5

angular-router

angular-router-guards