如何限制用户访问Angular中未经授权的路径

Question

在我的Angular应用中，有3种类型的用户：管理员，Brewer（供应商）＆amp;最终用户。我想防止酿酒师访问管理路线，就像应防止最终用户访问管理员路由和供应商路线一样。

如何通过角路由来实现这一目标。

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'home', component: HomeContentComponent,
  },
  { path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule' },
  {
    path: 'admin',
    loadChildren: './modules/admin/admin.module#AdminModule',
    canActivate: [AuthGuard],
  },
  {
    path: 'vendor',
    loadChildren: './modules/vendor/vendor.module#VendoreModule',
    canActivate: [AuthGuard],
  },
  {
    path: 'user',
    loadChildren: './modules/user/user.module#UserModule',
    canActivate: [AuthGuard],
  }
]

auth Guard：

import { Injectable } from "@angular/core";
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  Router,
  CanDeactivate,
} from "@angular/router";
import { Observable } from "rxjs";
import { AuthService } from "../services/firebase/auth.service";

@Injectable({ providedIn: "root" })
export class AuthGuard implements CanActivate {
  constructor(public authService: AuthService, public router: Router) {}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // Guard for userRole is login or not
    // var Role=localStorage.getItem('role')
    let user = localStorage.getItem('toke');
    if (!user) {
      this.router.navigate(["/auth/login"]);
      return true;
    }
    return true;
  }
}

我有这样的auth Guard，我如何对其进行修改以实现所需的功能。

如果有人能提供帮助，将不胜感激。

Answer 1

我已经使用逻辑来实现这一目标，

您可以在 app.component.ts 中使用逻辑

import { Router, NavigationEnd } from '@angular/router';
    
export class AppComponent implements OnInit {
      constructor(
        private router: Router,
      ) {
        this.router.events.subscribe((ev) => {
          if (ev instanceof NavigationEnd) {
    
            const user = localStorage.getItem("Id");
            const Role = localStorage.getItem('UserRole')
            if (user && Role && Role === 'User' && ev.url.includes('/admin)) {
                this.router.navigate(['user/home']);
          }
        }
      }

类似地，对于您的所有角色，您都可以定义条件，并且可以
在其主要路由上重定向，如果用户则是用户的默认页面，
如果超级管理员，则可能是管理员/仪表板
这个。

第二种方法：

另一种实现这一目标的方法是使用 ngx-permissions < /a>使用可以根据角色控制路线的使用。

附加 stackblitz 演示以获取更多澄清。

官方doc

npm软件包

Answer 2

如果其他条件，您可以使用多个

const Role = localStorage.getItem('role')
if(Role != "admin"){
    this.router.navigate(["/auth/login"]);
}