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

Question

在我的 Angular 应用程序中有 3 种类型的用户：管理员、酿酒师（供应商）和最终用户。我想阻止 brewer 访问管理路由，就像最终用户应该被阻止访问管理路由和供应商路由一样。

如何通过 angular 路由实现此目的。

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],
  }
]

授权卫士：

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

Similarly for your all roles you can define if condition and can redirect on their main route lets if user then user's default page, if super admin then it might be admin/dashboard anything like this.

第二种方式：

实现此目的的另一种方法是使用 ngx-permissions，您可以使用它根据角色控制路线。

附上 stackblitz 演示以获得更多说明。

Official doc

NPM Package

Answer 2

你可以使用多个 if else 条件

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

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

How to restrict user to access unauthorized path in angular

multi-user

angular-routing

angular