Javascript 在Angular2中使用警卫捕获重定向路线
我在Angular 2中使用守卫捕捉原始导航路线时遇到问题 我的站点由一个受授权保护的核心模块和一个不受保护的登录页面组成 核心模块在自己的应用程序路由文件中定义了自己的子路由,任何未定义的路由都会重定向到根路径 这是我的顶级路由模块Javascript 在Angular2中使用警卫捕获重定向路线,javascript,angular,angular-ui-router,Javascript,Angular,Angular Ui Router,我在Angular 2中使用守卫捕捉原始导航路线时遇到问题 我的站点由一个受授权保护的核心模块和一个不受保护的登录页面组成 核心模块在自己的应用程序路由文件中定义了自己的子路由,任何未定义的路由都会重定向到根路径 这是我的顶级路由模块 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuard
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth';
const routes: Routes = [
// Login module is public
{ path: 'login', loadChildren: 'app/auth/auth.module#AuthModule' },
// Core route protected by auth guard
{ path: '', loadChildren: 'app/core/core.module#CoreModule', canLoad: [AuthGuard] },
// otherwise redirect to home
{ path: '**', redirectTo: '' }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
这是AuthGuard类
import { Injectable } from '@angular/core';
import { Router, CanLoad, Route } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanLoad {
constructor(
private authService: AuthService,
private router: Router
) {}
canLoad(route: Route): boolean {
this.authService.redirectUrl = `/${route.path}`;
console.log('path:' + route.path);
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate(['/login']);
return false;
}
}
}
这是一个非常简单的登录/重定向方案,但是无论我导航到哪个URL,route.path
值始终为空。我有一种预感,它与{path:'**',重定向到:'}
路由有关,但我不确定
我不想使用canActivate,因为我只想在用户实际登录时加载主模块
我所期望的是,如果我导航到
/foobar
,那么在AuthGuard类中将route.path
设置为foobar,但它不是。它总是空的,因此我无法在用户登录后执行正确的重定向。尝试添加路径匹配:“full”如下:
{路径:'**',重定向到:'',路径匹配:'full'}
或
从“@angular/router”导入{CanActivate,RouterStateSnapshot,ActivatedRouteSnapshot};
从“rxjs/Rx”导入{订阅,可观察};
导出类HomepageGuard实现CanActivate{
canActivate(路由:ActivatedRouteSnapshot,状态:RouterStateSnashot):可观察的布尔值{
log(`[homepage.guard.ts]-[canActivate()]`);
控制台日志(路由);
console.log(状态);
//你可以继续吗
返回true;
}
}如何使用
route.path
进行重定向?路由保存在this.authService.redirectUrl
中,然后在用户登录后手动重定向到该路径。不管怎样,这就是我的意图,它不起作用,因为路径总是空的。this.authService.redirectUrl=
/${route.path}`-在哪里使用了route.path
?代码的这部分没有被引用,因为它从未到达那个点。
import {CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot} from "@angular/router";
import { Subscription, Observable } from "rxjs/Rx";
export class HomepageGuard implements CanActivate {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
console.log(`[homepage.guard.ts]-[canActivate()]`);
console.log(route);
console.log(state);
// are you allowed to continue
return true;
}