angular2-routing – angular2:如何在保持重定向url的同时获取CanLoad保护的完整路径

前端之家收集整理的这篇文章主要介绍了angular2-routing – angular2:如何在保持重定向url的同时获取CanLoad保护的完整路径前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用角2.4版和路由器版“^ 3.4.10”.

我正在尝试使用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.在父路线上定义它应该为所有子路线应用保护.

猜你在找的Angularjs相关文章