基于用户角色角度路由器“〜3.4.0”的动态登录页面

Question

我具有不同的用户角色，并且基于登录的用户角色，我想在登录后更改默认页面（登录页面）。我该如何实现它，还没有在线找到任何资源，是否需要尚未实施，或者我缺少一些东西：

我有两个模块ExceptionDashboard和CashierRiskprofile模块路由

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。

ExceptionDashboard：

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

对于Admin用户，我们将CashierRiskProfile显示为已经默认的登录页面，对于其他用户，我想将exceptionDashboard路径显示为登录页面。如何基于UserRole进行更改。

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

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;
    }
}

我想实现一些可以根据用户角色动态更改默认页面的功能。

Answer 1

在守卫内部而不是返回，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;
    }