如何使用 JWT 在 angular 应用程序中实现不同的角色

Question

我正在尝试使用 express 后端和 jwt 以及 angular 作为前端 .

问题是我需要识别登录应用程序的用户，以便将他们重定向到各自的面板。每个用户的类型在数据库中的一个字段中找到（如果是普通用户和管理员则为空）。

问题是，我应该实施什么来识别用户？

这是登录名，用户应该在这里被识别。

login(){
const user ={
  Email: this.UsuarioForm.get('Email')?.value,
  Password : this.UsuarioForm.get('Password')?.value
  }

  if(this.UsuarioForm.valid){
    this.userService.login(user).subscribe((data)=>{
      this.authService.setLocalStorage(data);
      console.log(data);
    },
    (error) =>{
      console.log(error);
    },

    ()=>{
      console.log('done!');
      this.router.navigate(['protected']);
    }
  );

}

}

这是他们目前所走的“受保护”路线。在这里我能够通过服务器的响应状态来识别用户，但我不知道这是不是最好的方法。

ngOnInit(): void {
this.usersService.protected().subscribe((data)=>{
  this.message = data.message;
  console.log(data);
},
(error) =>{
  if(error.status === 403){
    this.message= 'you are not authorized'
  }

  if(error.status === 200){
    this.message = 'The user is registered'
    console.log(this.authService.getExpiration());
  }

  if(error.status === 201){
    this.message= 'The user is registered and is admin'
    console.log(this.authService.getExpiration());
  }
  console.log(error);
},

() =>{
  console.log('http request done!')
}

);

}

Answer 1

您可以使用 canActivate guard 实现对您的路线的 role-based 访问。
首先，使用此命令创建守卫 ng generate guard yourRoleName
然后，您可以检查角色并在 CanActivate 方法中执行您的逻辑。
这是一个简单的例子：

import { Injectable } from "@angular/core";
import {
  CanActivate,
} from "@angular/router";

@Injectable({
  providedIn: "root",
})
export class YourRoleNameGuard implements CanActivate {
  canActivate() {
    const role = localStorage.getItem("role");
    if (role == "YourRoleName") {
      return true;
    }
    return false;
  }
}

并在 app-routing.module.ts

中为您要保护的路由添加此守卫

const routes: Routes = [
  {
    path: "/your-path",
    component: YourComponent,
    canActivate: [YourRoleNameGuard],
  },
]
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

您可以从 here

阅读更多关于 guards 的信息

如何使用 JWT 在 angular 应用程序中实现不同的角色

how to implement different roles in an angular application with JWT

role-based

express

jwt

angular