在我的 Angular 8 应用程序中,我有 3 个延迟加载模块。每个模块都针对特定的用户角色。我正在使用 canActivate 接口进行身份验证和角色防护。
对于以下路线
{ path : '' , pathMatch : 'full' , redirectTo : ''}
我应该如何使用重定向到属性,因此它根据用户角色重定向到延迟加载的路由。
这是路由模块的代码。
应用程序路由模块.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;
}
}