问题描述
在我的 angular 8 应用程序中,我有 3 个延迟加载模块.每个模块用于特定用户的角色.我正在使用 canActivate 接口进行身份验证和角色保护.
对于以下路线
In my angular 8 application, I have 3 lazy-loading modules. Each module is for a specific user's role. I'm using canActivate interface for Auth and Role Guard.
For the following route
{ path : '' , pathMatch : 'full' , redirectTo : ''}
我应该如何使用 redirectTo 属性,以便它重定向到基于用户角色的延迟加载路由.这是路由模块的代码.
app.routing.module.ts
how should I use redirectTo property, so it redirects to a lazyloaded route based on user role .This is the code for routing module.
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path : '' , pathMatch: 'full' , redirectTo : ''},
{ path : 'admin' , loadChildren : () => import('./modules/admin/admin.module').then(mod => mod.AdminModule) , canActivate : [AuthGuardService] , data : { role : 'admin'}} ,
{ path : 'member' , loadChildren : () => import('./modules/member/member.module').then(mod => mod.MemberModule) , canActivate : [AuthGuardService] , data : { role : 'member'}} ,
{ path : 'user' , loadChildren : () => import('./modules/user/user.module').then(mod => mod.UserModule) , canActivate : [AuthGuardService] , data : { role : 'user'}} ,
{ path : '**' , component : NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
AuthGuardService.ts
import { Injectable } from '@angular/core';
import { Router , CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../auth-service/auth-service.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuardService implements CanActivate {
constructor(
private router: Router,
private authService: AuthService
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean {
const currentUser = this.authService.userVal;
const role = route.data.role;
if (currentUser) {
if(role && role.indexOf(currentUser.role) > -1)
return true;
else
return false;
}
return false;
}
}
推荐答案
再次感谢 @DeborahK.完成此Github Disucssion后,这是有效的解决方法.
once again thanks to @DeborahK. After going through this Github Disucssion, This is the workaround which works.
app.routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path : '' , pathMatch: 'full' , redirectTo : '' , canActivate : [RedirectGuardService]},
{ path : 'admin' , loadChildren : () => import('./modules/admin/admin.module').then(mod => mod.AdminModule) , canActivate : [AuthGuardService] , data : { role : 'admin'}} ,
{ path : 'member' , loadChildren : () => import('./modules/member/member.module').then(mod => mod.MemberModule) , canActivate : [AuthGuardService] , data : { role : 'member'}} ,
{ path : 'user' , loadChildren : () => import('./modules/user/user.module').then(mod => mod.UserModule) , canActivate : [AuthGuardService] , data : { role : 'user'}} ,
{ path : '**' , component : NotFoundComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
redirect-guard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from '../auth-service/auth-service.service';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class RedirectGuardService implements CanActivate {
constructor(
private router: Router,
private authService: AuthService
) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean {
const user = this.authService.userVal;
if (user) {
this.router.navigate(['/'+ user.role]);
return true;
}
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
这篇关于重定向到基于用户角色的惰性模块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!