Question

我有一个数组的问题，该数组用于在角应用程序中的授权服务中存储角色。我正在使用auth0服务登录。 auth.service.ts看起来像这样：

  @Injectable()
export class AuthService {
  userProfile: any;
  private roles: string[] = [];
 ...
  public handleAuthentication(): void {
this.auth0.parseHash((err, authResult) => {
  if (authResult && authResult.accessToken && authResult.idToken) {
    window.location.hash = '';
    this.setSession(authResult);
    this.getRoles(authResult);
    this.router.navigate(['/']);
  } else if (err) {
    this.router.navigate(['/']);
    console.log(err);
    alert(`Error: ${err.error}. Check the console for further details.`);
  }
});}
//THIS IS getRole function
private getRoles(authResult){
let jwtHelper = new JwtHelper();
let decodedToken = jwtHelper.decodeToken(authResult.idToken);
this.roles = decodedToken['https://tobenorme.com/roles'];

}

登录后，调用handleAuthentication函数，一切正常，直到单击刷新按钮。然后角色数组返回空数组，我不再能够获得角色。我尝试将它们存储在本地存储中，但可以在浏览器中进行编辑。

Answer 1

当您刷新并且状态消失时，您的应用程序将再次引导，如您所述，将数据存储到本地存储或会话存储中（最好不要以明文形式存储），当您不想这样做时，创建一个类似singelton的方法，当角色为空时进行http调用并获取它，当角色不为空时将其返回。使用RxJs BehaviorSubject是一个很好的例子。

Answer 2

本地存储应该没问题，只要它在您的浏览器中启用即可。请务必使用localStorage.setItem(name, value)来存储值，并使用localStorage.getItem(name)来检索下次的值。

Answer 3

由于使用JWT令牌（https://auth0.com/docs/jwt）声明，您可以安全地依赖将令牌存储在本地存储或cookie中。 JWT令牌已签名，因此在每次API调用解密令牌时，将在服务器上检测到浏览器中的每个本地更改。

无法避免本地更改，但服务器端应始终确保用户实际拥有所提供的角色/权限。

您可以参考以下示例：https://github.com/auth0/angular2-jwt

Typescript，Angular4：刷新浏览器后数组变空

3 个答案: