angular - 基于 Angular 6 角色的根 url 路由
问题描述
我正在尝试为我的根 url 实现基于角色的路由。例如,当用户登录时,我可以将他从 login.component 重定向到用户的仪表板页面。同样适用于管理员,也通过登录重定向到管理员仪表板页面。但是,如果用户打开 root url,如何使用角色重定向到特定的仪表板?
目前,我的根路由指向仪表板组件,该组件解析角色并重定向到所需的仪表板页面、用户或管理员。有没有办法消除仪表板组件?
应用路由.ts
export const AppRoutes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full'
},
{
path: '',
component: AdminLayoutComponent,
canActivate: [AuthGuard],
canLoad: [AuthGuard],
children: [
{
path: 'dashboard',
loadChildren: './dashboard/dashboard.module#DashboardModule'
},
仪表板路由.ts
export const DashboardRoutes: Routes = [
{
path: '',
component: DashboardRedirectComponent,
},
测试 DashboardRedirect 组件:
export class DashboardRedirectComponent implements OnInit, AfterViewInit {
constructor(private auth: AuthenticationService, private router: Router) {
let currentUser = JSON.parse(localStorage.getItem('currentUser'));
if (this.auth.loggedIn()) {
if (currentUser['role'] == 'User') {
this.router.navigate(['/dashboard/user']);
}
if (currentUser['role'] == 'Admin') {
this.router.navigate(['/dashboard/admin']);
}
}
}
我尝试使用守卫甚至解析器来实现它,但没有成功。当我打开我的应用程序的根页面时,它导航到仪表板,几秒钟后导航到相应的仪表板页面,但我想立即导航用户并且没有额外的组件。有什么建议吗?
解决方案
如果要跳过当前路由,则需要从警卫处返回 false。在基于角色的重定向中,首先检查用户是否实际路由到您的基本组件/dashboard
而不是特定路由,/dashboard/admin
否则您将拦截基于角色的路由。然后检查角色,当你想要重定向时返回 false 以跳过实际路由。
例如:
canActivate (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const roles = this.permissionsService.getPermissions();
switch (true) {
case state.url !== '/home': {
return true;
}
case !!roles['admin']: {
this.router.navigate(['home', 'admin']);
return false;
}
case !!roles['user']: {
this.router.navigate(['home', 'user']);
return false;
}
default: return true;
}
}
推荐阅读
- python - 选择性地删除字符串中的空格
- c++ - SDL_PollEvent 有时在屏幕重新连接后不捕获触摸事件
- jinja2 - 在 Apache Airflow 的 S3KeySensor 中模板化 `bucket_key`
- apache - Apache 目录指令
- python - 在 numpy 数组中从末端切割可变距离的更多 Pythonic 方法
- java - Java:无法从套接字读取,线程卡在 readLine()
- java - ListenableFutureCallback - 永远不会调用 onFailure
- r - 计算测量值的汇总统计数据并将它们旋转到 R 中的列
- python-3.x - 熊猫如何检查列中的值是顺序的
- android - Android Auto 自定义应用 - 官方