1

我正在尝试使用 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!')
}

);

}

4

1 回答 1

1

您可以使用 acanActivate 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从这里了解更多信息

于 2022-01-23T08:04:30.437 回答