如何通过用户角色来守护路由？角

Question

我需要做一个角色基地守卫。

如果用户有，activeType = 0他可以访问某些路线。如果用户有，activeType = 1他可以访问其他路线。

我已经有一名路线守卫，但如果您是否登录，我需要为另一名守卫添加此守卫，但如何？

    userData: User;
      authData: AuthData;
      constructor(private router: Router, 
                  private userService: UserService,
                  private location: Location) {
      }
    
      canActivate() {
        const userData = JSON.parse(localStorage.getItem("userData"));
        const authData = JSON.parse(localStorage.getItem("authData"));
        const route = this.location.path();
        if (!userData && !authData) {
          return true;
        } else {
          if (route == '/login'  || route === '/register') {
            this.location.back();
            return false;
          } else {
            return true;
          }
        }
      }
    
      canLoad() {
        const userData = JSON.parse(localStorage.getItem("userData"));
        const authData = JSON.parse(localStorage.getItem("authData"));
        if (userData && authData) {
          // logged in so return true
          return true;
        }
    
        // not logged in so redirect to login page with the return url
        this.userService.logout();
        this.router.navigate(["/login"]);
        return false;
      }

    const routes: Routes = [
      {
        path: "route-for-user-activeType-1",
        loadChildren: () =>
          import("./one/one.module").then(
            (m) => m.OneModule
          ),
        canLoad: [AuthGuard]
      },
      {
        path: "route-for-user-activeType-0",
        loadChildren: () =>
          import("./two/two.module").then((m) => m.twoModule),
          canActivate: [AuthGuard]
      },
      {
        path: "route-path-for-user-activeType-1",
        loadChildren: () =>
          import("./test/test.module").then((m) => m.testModule),
          canActivate: [AuthGuard]
      }
    ]

Answer 1

我们将为 Routes 对象提供有关角色的信息。这个过程很简单。您所要做的就是添加一个守卫并将您的数据添加到该角色中。

\n

添加如下所示的防护，

\n

canActivate: [AuthGuard]\n

\n

您可以提供将访问该页面的角色信息，如下所示，

\n

data: {\n          role: 'ROLE_ADMIN'\n     }`\n

\n

所以routing-module.ts应该是这样的。

\n

 {\n    path: 'admin', component: AdminDashboardComponent,\n    canActivate: [AuthGuard],\n    data: {\n      role: 'ROLE_ADMIN'\n    }\n  }\n

\n

创建了一个身份验证服务，该服务提供有关用户\xe2\x80\x99s 登录状态和角色的信息。\n我\n\xe2\x80\x99t 没有任何有关 jwt 令牌实现的集成。这只是一个简单的登录和获取角色的模拟。

\n

@Injectable({\n      providedIn: 'root'\n    })\n    export class AuthService {\n      isLogin = false;\n    \n      roleAs: string;\n    \n      constructor() { }\n    \n      login(value: string) {\n        this.isLogin = true;\n        this.roleAs = value;\n        localStorage.setItem('STATE', 'true');\n        localStorage.setItem('ROLE', this.roleAs);\n        return of({ success: this.isLogin, role: this.roleAs });\n      }\n    \n      logout() {\n        this.isLogin = false;\n        this.roleAs = '';\n        localStorage.setItem('STATE', 'false');\n        localStorage.setItem('ROLE', '');\n        return of({ success: this.isLogin, role: '' });\n      }\n    \n      isLoggedIn() {\n        const loggedIn = localStorage.getItem('STATE');\n        if (loggedIn == 'true')\n          this.isLogin = true;\n        else\n          this.isLogin = false;\n        return this.isLogin;\n      }\n    \n      getRole() {\n        this.roleAs = localStorage.getItem('ROLE');\n        return this.roleAs;\n      }\n    \n    }\n

\n

AuthGuard.ts应该

\n

@Injectable({\n      providedIn: 'root'\n    })\n    export class AuthGuard implements CanActivate, CanActivateChild, CanDeactivate<unknown>, CanLoad {\n    \n    \n      constructor(private authService: AuthService, private router: Router) { }\n    \n      canActivate(\n        next: ActivatedRouteSnapshot,\n        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {\n        let url: string = state.url;\n        return this.checkUserLogin(next, url);\n      }\n      canActivateChild(\n        next: ActivatedRouteSnapshot,\n        state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {\n        return this.canActivate(next, state);\n      }\n      canDeactivate(\n        component: unknown,\n        currentRoute: ActivatedRouteSnapshot,\n        currentState: RouterStateSnapshot,\n        nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {\n        return true;\n      }\n      canLoad(\n        route: Route,\n        segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean {\n        return true;\n      }\n    \n      checkUserLogin(route: ActivatedRouteSnapshot, url: any): boolean {\n        if (this.authService.isLoggedIn()) {\n          const userRole = this.authService.getRole();\n          if (route.data.role && route.data.role.indexOf(userRole) === -1) {\n            this.router.navigate(['/home']);\n            return false;\n          }\n          return true;\n        }\n    \n        this.router.navigate(['/home']);\n        return false;\n      }\n    }\n

\n

希望这个答案有帮助

\n