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

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来实现对路由的基于角色的访问
首先，使用此命令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 {}

你可以从这里阅读更多关于guards的