angular - 基于用户角色的动态登陆页面 Angular Router "~3.4.0"

Question

我有不同的用户 Angular 色，基于登录的用户 Angular 色，我想在登录后更改默认页面(登陆页面)。我如何实现它，没有在网上找到任何资源，这是什么还需要实现，否则我会遗漏一些东西:

我有两个模块 ExceptionDashboard 和 cashierRiskprofile 模块 routes

import { Routes, RouterModule } from "@angular/router";

import { CashierRiskProfileComponent }    from "./cashierriskprofile.component";

const cashierRiskProfileRoutes: Routes = [
    { path: "", redirectTo: "cashierriskprofile", pathMatch: "full" },
    { path: "cashierriskprofile", component: CashierRiskProfileComponent }
];

export const CashierRiskProfileRouting = RouterModule.forChild(cashierRiskProfileRoutes);

以上代码将默认路由作为 cashierRiskprofile。

异常仪表板:

const exceptionDashboardRoutes: Routes = [
    { path: "exceptionDashboard", component: ExceptionDashboardComponent, pathMatch: 'full' },
    { path: "exceptionDetail", component: ExceptionDetailComponent, pathMatch: 'full' },
     { path: "exceptionTransaction", component: ExceptionTransactionComponent, pathMatch: 'full' }
];

对于管理员用户，我们将 CashierRiskProfile 显示为已经默认的登陆页面，对于其他用户，我想将 exceptionDashboard 路径显示为登陆页面。如何根据 UserRole 更改它。

我知道如何实现 CanActivateViaAuthGuard“canActivate”服务以在用户未经过身份验证时重定向到特定页面，但我正在考虑根据用户 Angular 色更改登录页面？

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
//import { AuthService } from './auth.service';

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {

    constructor(/*private authService: AuthService*/) { }

    canActivate() {
        //if logged in return true
        return true;

        //else retrun to login page
        //return false;
    }
}

我想实现一些根据用户 Angular 色动态更改默认页面的东西。

Answer 1

在守卫内部，您可以根据用户的 Angular 色重定向用户，而不是返回 true 或 false。

例子:

constructor(private authService: AuthService, private router: Router) {}

canActivate() {
        //if role is system manager
        if(this.checkUserRoleFunction() == "system manager"){
           this.router.navigate(['/exceptionTransaction']);
        }else if(this.checkUserRoleFunction() == "associate"){
           this.router.navigate(['/exceptionDetail']);
        }else{
           this.router.navigate(['/exceptionTransaction']);
        }
        return false;
    }