angular2:如何在保持重定向 url 的同时获取 CanLoad 防护的完整路径 [英] angular2: how to get Full path on CanLoad guard while maintaining redirect url
问题描述
我使用的是 angular 2.4 版本和路由器版本^3.4.10".
I am using angular 2.4 version and router version "^3.4.10".
我正在尝试使用身份验证保护服务处理重定向 url.
I am trying to handle redirect url using auth guard service.
当用户点击 url 'domain/assignment/3/detail' 并且如果用户未登录，则用户重定向到 'domain/login' 页面.当用户成功登录系统时，重定向到用户尝试访问的域/分配/3/详细信息"上一个 url.
When user hit url 'domain/assignment/3/detail' and if user is not login then user redirected to 'domain/login' page. and when user successfully login in to system then redirected to 'domain/assignment/3/detail' previous url which user tries to access.
我已经在赋值模块上实现了 CanLoad 保护.因此，当用户尝试访问 url 'domain/assignment/3/detail' 并且如果用户未登录时，url 将存储到 authservice (this.authService.redirectUrl) 的 redirectUrl 属性中.
I have implemented CanLoad guard on assignment module. so when user tries to access url 'domain/assignment/3/detail' and if user is not login, url stores into redirectUrl property of authservice (this.authService.redirectUrl).
所以这是我的问题.我无法获得用户点击的网址的完整路径.我在 CanLoad 守卫中得到分配"而不是分配/3/细节".我如何获得完整路径，以便我可以将用户重定向到 CanLoad 防护中的正确路径.
so here is the issue comes in my case. i am not able to get full path of the url which user hit. i am getting 'assignment' instead 'assignment/3/detail' within CanLoad guard. how can i get full path so that i can redirect user to proper path within CanLoad guard.
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
Main routing 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
Assignment routing: 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
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;
}
}
推荐答案
我遇到了完全相同的问题.这些问题是相关的
I have this exact same problem. These issues are related
他们甚至有一个关于这个尚未合并的公开公关
And they even have an open PR about this which hasn't been merged yet
目前的解决方法似乎是将 canLoad 方法替换为 canActivate，这样您就可以访问完整路径，当然不好的是你正在加载模块
The workaround for now seems to be to replace the canLoad method with the canActivate, there you can have access to the full path, the bad thing of course is that you're loading the module
同样对于您的分配路由，无需为每个子路由调用 canActivate.在父路由上定义它应该对所有子路由应用保护.
Also for you Assignment routing, there's no need to call canActivate for each child route. Have it defined on the parent route should apply the guard for all child routes.
这篇关于angular2:如何在保持重定向 url 的同时获取 CanLoad 防护的完整路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
