Angular 2基于角色的相同路径导航

Angular 2 Role based navigation on same path

本文关键字：路径 导航 角色 于角色 Angular      更新时间：2023-09-26

我有一个关于使用版本3.0.0-rc.1的Angular 2路由器的小问题，我想根据用户角色(如AdminComponent或UserComponent)导航到不同的主组件。谁能帮忙修改下面的路线，使我能实现所需的功能?

{path: 'login', component: LoginComponent},  // <--- This redirects to '/' in case user is logged in
{
  path: '',
  component: HomeComponent,               
  canActivate: [AuthGuardService],  // <--- Check if user is logged in, else redirect to login
  children: [
    {
      path: '',
      component: AdminComponent  // <--- Want to navigate here if user role is 'admin'
    },
    {
      path: '',
      component: UserComponent  // <--- Want to navigate here if user role is 'user'
    }
  ]
}

AuthGuardService.ts 

import {Injectable} from "@angular/core";
import {CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {AuthService} from "./auth.service";
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {
  }
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.authService.isLoggedIn()) {
      return true;
    }
    // Store the attempted URL for redirecting
    this.authService.redirectUrl = state.url;
    // Navigate to the login page with extras
    this.router.navigate(['/login']);
    return false;
  }
}

AuthService.ts 

import {Injectable} from "@angular/core";
@Injectable()
export class AuthService {
  redirectUrl: string;
  logout() {
    localStorage.clear();
  }
  isLoggedIn() {
    return localStorage.getItem('token') !== null;
  }
  isAdmin() {
    return localStorage.getItem('role') === 'admin';
  }
}

谢谢。

您可以通过以下方式实现。

{path: 'login', component: LoginComponent},  // <--- This redirects to '/' in case user is logged in
{
  path: '',
  component: HomeComponent,               
  canActivate: [AuthGuardService],
}

这是你的主组件html(home.component.html)

<app-admin *ngIf="user_role==='admin'"></app-admin>
<app-user *ngIf="user_role==='user'"></app-user>
确保你在home组件的typescript文件中分配了user_role

这是你的管理组件html(admin.component.html)

<div>
this is admin component
</div>

这是你的用户组件html(user.component.html)

<div>
    this is user component
</div>

希望，这将帮助你。

问题是你不能有两个路径相同的路由。您可以做的最简单的更改是将路径更改为如下内容:

   {
      path: 'admin',
      component: AdminComponent 
    },
    {
      path: 'user',
      component: UserComponent
    }

这可能是最好的选择，因为您希望组件根据用户角色而不同。您可能还希望其他组件有所不同，您可以通过向admin或user路由添加子路由来轻松实现这一目标。

在你的AuthGuard中，你仍然只返回true，但是你为admin和user路由设置了另外两个保护。它检查用户是否是管理员。

登录后通过检查用户角色重定向到正确的路由然后在组件中执行router.navigate(['/admin'])或router.navigate(['/user'])

相关文章：