代码之家 › 专栏 › 技术社区 › hxdef

基于根url的Angular 6基于角色的路由

angular-router-guards angular-router angular-routing angular

0

hxdef · 技术社区 · 7 年前

我正在尝试为我的根url实现基于角色的路由。例如,当用户登录时,我可以将他从login.component重定向到用户的仪表板页面。同样适用于管理员,也可以通过登录重定向到管理员仪表板页面。但若用户打开根url,如何使用角色重定向到特定的仪表板?

认可

export const AppRoutes: Routes = [

    {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
    },  

{
        path: '',
        component: AdminLayoutComponent,
        canActivate: [AuthGuard],
        canLoad: [AuthGuard],
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },

export const DashboardRoutes: Routes = [

    {
        path: '',
        component: DashboardRedirectComponent,
    },

测试仪表板重定向组件:

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']);
            }
        }
    }

我曾尝试使用防护甚至解析器来实现这一点,但没有成功。当我打开我的应用程序的根页面时,它会导航到仪表板,几秒钟后会导航到相应的仪表板页面,但我希望立即导航到用户,而不需要额外的组件。有什么建议吗?

2 回复 | 直到 7 年前

1

0

Arun Saini 7 年前

您需要创建一个保护名称作为 重定向保护

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable()
export class RedirectGuard implements CanActivate {
 let currentUser = null;
 let auth = null;

    constructor(private authenticationService: AuthenticationService) {
      this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
      this.auth =  authenticationService;
     }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
      //Your redirection logic goes here

      if (this.auth.loggedIn()) {

        if (currentUser['role'] == 'User') {
            this.router.navigate(['/dashboard/user']);
        }

        if (currentUser['role'] == 'Admin') {
            this.router.navigate(['/dashboard/admin']);
        }
    }
   return false;

    }
}

在…内认可详情如下:

path: '',
        component: AdminLayoutComponent,
        canActivate: [RedirectGuard],
        canLoad: [AuthGuard],
        children: [
            {
                path: 'dashboard',
                loadChildren: './dashboard/dashboard.module#DashboardModule'
            },

2

0

J. S. 7 年前

如果要跳过当前路由,需要从guard返回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;
    }

  }