如何解决Angular 一条路径根据条件加载多个模块
尝试根据用户在我的 Angular 应用程序中的角色加载多个模块。
const user = result.data as User;
this._authSerivce.setUser(user);
this._router.navigate([this._route.snapshot.queryParams['redirectTo'] || '/home']);
我的路由所在的文件(page-routing.module.ts):
const routes: Routes = [
{ path: '',redirectTo: '/home',pathMatch: 'full' },{ path: 'home',loadChildren: () => import('./home/home-handler.module').then(m => m.HomeHandlerModule) },{ path: 'forgot-password',loadChildren: () => import('./forgot-password/forgot-password.module').then(m => m.ForgotPasswordModule) },{ path: '**',redirectTo: '/404' }
];
我正在为路径“home”(home-handler.module.ts)加载这个处理程序模块:
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule,ROUTES,Routes } from '@angular/router';
import { AuthService } from 'app/shared/services/auth.service';
@NgModule({
declarations: [],imports: [
CommonModule,RouterModule
],providers: [
{
provide: ROUTES,useFactory: configHomeHandlerRoutes,deps: [AuthService],multi: true
}
]
})
export class HomeHandlerModule { }
export function configHomeHandlerRoutes(authService: AuthService) {
let routes: Routes = [];
if (authService.hasRole('dispatcher')) {
routes = [
{
path: '',loadChildren: () => import('./dispatcher/dispatcher.module').then(mod => mod.dispatcherModule)
}
];
} else {
routes = [
{
path: '',loadChildren: () => import('./default/default.module').then(mod => mod.DefaultModule)
}
];
}
return routes;
}
身份验证服务如下所示:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { User } from 'app/shared/models/user.model';
import { BehaviorSubject,Observable } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class AuthService {
private currentUserSubject: BehaviorSubject<User>;
public currentUser: Observable<User>;
constructor(private http: HttpClient,private _router: Router) {
this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
this.currentUser = this.currentUserSubject.asObservable();
}
/**
* function to store user details in local storage
* @param user user details object
*/
setUser(user: User): void {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser',JSON.stringify(user));
this.currentUserSubject.next(user);
}
/**
* function to get current user
*/
getUser(): User {
return this.currentUserSubject.value;
}
/**
* function to check if a user has the mentioned role
* @param role name of the role
*/
hasRole(role: string): boolean {
const user = this.getUser();
return user && user.role === role ? true : false;
}
/**
* function to check if a user has the mentioned permission
* @param permission code of the permission
*/
hasPermission(permission: string): boolean {
const user = this.getUser();
return user && user.permissions.indexOf(permission) > -1 ? true : false;
}
/**
* function to remove user details from local storage
*/
logout(): void {
// remove user from local storage to log user out
localStorage.removeItem('currentUser');
this.currentUserSubject.next(null);
}
}
问题是当具有角色调度员的用户第一次登录并尝试重定向到主页时。在 home-handler.module.ts configHomeHandlerRoutes() 方法中。 authService.getUser() 返回未定义。并始终重定向到 default.module 而不是 dispatcher.module
我还尝试了以下代码从 route.config 中删除当前主路径并重新添加它。但它重定向到未找到的 404 页面路径。
AuthService 中的 setUser() 方法:
setUser(user: User): void {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser',JSON.stringify(user));
this.currentUserSubject.next(user);
const i = this._router.config.findindex(x => x.path === 'home');
this._router.config.splice(i,1);
this._router.config.push(
{
path: 'home',loadChildren: () => import('../../pages/home/home-handler.module').then(mod => mod.HomeHandlerModule)
}
);
}
我该如何解决这个问题或哪里出错了?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。