我正在尝试使用auth guard服务来处理重定向url.
当用户点击url’domain / assignment / 3 / detail’并且如果用户没有登录,则用户重定向到’domain / login’页面.
当用户成功登录系统,然后重定向到’domain / assignment / 3 / detail’用户尝试访问的前一个URL.
我在分配模块上实现了CanLoad guard.因此,当用户尝试访问url’domain / assignment / 3 / detail’并且如果用户未登录时,url将存储到authservice(this.authService.redirectUrl)的redirectUrl属性中.
所以问题来自我的问题.我无法获得用户点击的网址的完整路径.
我在CanLoad后卫中获得“任务”而非“任务/ 3 /细节”.
我怎样才能获得完整路径,以便我可以将用户重定向到CanLoad后卫内的正确路径.
CanLoad:
canLoad(route: Route): boolean { let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail' return this.checkLogin(url); }
主要路由app.routes.ts
const routes: Routes = [ { path: '',redirectTo: 'login',pathMatch: 'full' },{ path: 'login',component: LoginComponent},{ path: 'assignment',loadChildren: './assignment/assignment.module#AssignmentModule',canLoad: [AuthGuard] },{ path: '**',redirectTo: '',pathMatch: 'full' }];
分配路由:assignment-routing.ts
const assignmentRoutes: Routes = [ { path: '',component: AssignmentComponent,canActivate: [AuthGuard] children: [ { path: '',canActivateChild: [AuthGuard],children: [ { path: ':assignmentId/detail',component: AssignmentDetailComponent,canActivate: [AuthGuard] } ] }] }];
AuthGuard:auth-gurad.service.ts
import { Injectable } from '@angular/core'; import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot,CanActivateChild,NavigationExtras,CanLoad,Route } from '@angular/router'; import { AuthService } from './auth.service'; @Injectable() export class AuthGuard implements CanActivate,CanLoad { constructor(private authService: AuthService,private router: Router) { } canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean { let url: string = state.url; return this.checkLogin(url); } canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): boolean { return this.canActivate(route,state); } canLoad(route: Route): boolean { let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail' return this.checkLogin(url); } checkLogin(url: string): boolean { if (this.authService.isLoggedIn) { if(this.authService.redirectUrl!=null){ let redirectUrl = this.authService.redirectUrl; this.authService.redirectUrl = null; this.this.router.navigate([redirectUrl]); } return true; } // Store the attempted URL for redirecting this.authService.redirectUrl = url; // Navigate to the login page this.router.navigate(['/login']); return false; } }
> https://github.com/angular/angular/issues/17359
> https://github.com/angular/angular/issues/12411
他们甚至有一个关于这个尚未合并的公开PR
> https://github.com/angular/angular/pull/13127
现在的解决方法似乎是用canActivate替换canLoad方法,在那里你可以访问完整路径,当然糟糕的是你正在加载模块
编辑:同样为您分配路由,不需要为每个子路由调用canActivate.在父路线上定义它应该为所有子路线应用保护.