angular2：如何在保持重定向网址的同时获取CanLoad守卫的完整路径

我正在使用角度2.4版本和路由器版本“^ 3.4.10”。

我正在尝试使用身份验证警卫服务来处理重定向网址。

当用户点击url'domain / assignment / 3 / detail'时，如果用户没有登录，则用户重定向到'域名/登录'页面。 并且当用户成功登录到系统后，然后重定向到用户尝试访问的'domain / assignment / 3 / detail'前一个网址。

我在分配模块上实现了CanLoad警卫。 因此当用户尝试访问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, CanActivateChild, 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

而且他们甚至对此尚未合并的公开宣传

https://github.com/angular/angular/pull/13127

现在的解决方法似乎是更换canLoad与方法canActivate ，那里你可以访问完整的路径，当然是坏事，你加载模块

编辑：也为你分配路由，没有必要为每个子路由调用canActivate 。 在父路线上定义它应该适用于所有子路线的警卫。

---

还有另一个临时解决方法，而不是用canLoad替换canActivate ：

您可以通过redirectUrl = location.pathname存储URL，稍后通过this.router.navigateByUrl(redirectUrl); 。 当然，如果你在子路径上工作（比如domain ），你必须稍微调整一下pathname 。

链接地址: http://www.djcxy.com/p/96389.html

上一篇: angular2: how to get Full path on CanLoad guard while maintaining redirect url

下一篇: Comparing Java's lambda expression with Swift's function type