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

Question

我在 angular 应用程序的授权服务中用于存储角色的数组有问题。我正在使用 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 函数后一切正常，直到单击刷新按钮。然后角色数组 returns 空数组，我无法再获得角色。我尝试将它们存储在本地存储中，但它可以在浏览器中进行编辑。

Answer 1

当您刷新并且状态消失时，您的应用程序将再次 bootstrap，正如您提到的，将数据存储到本地存储或会话存储中（最好不要以纯文本形式），当您不想要时为此，创建一个像 singelton 一样的方法，当角色为空时进行 http 调用并获取它，当角色不为空时将它们返回。是使用 RxJs BehaviorSubject 的好案例。

Answer 2

本地存储应该没问题，只要在您的浏览器中启用它即可。一定要使用localStorage.setItem(name, value)存储值，localStorage.getItem(name)下次取值。

Answer 3

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

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

可以参考下面的例子：https://github.com/auth0/angular2-jwt

Answer 4

也许它会帮助我这样解决的人：

private getRoles(authResult){
    let jwtHelper = new JwtHelper();
    let decodedToken;
    if (authResult && authResult.accessToken && authResult.idToken){
        decodedToken = jwtHelper.decodeToken(authResult.idToken);
        this.roles = decodedToken['https://tobenorme.com/roles'];
    }else if(this.isAuthenticated && authResult){
      decodedToken = jwtHelper.decodeToken(authResult);
      this.roles = decodedToken['https://tobenorme.com/roles'];
    }

而且我必须在构造函数中调用这个函数。

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

Typescript, Angular4: array goes empty after refreshing browser

token

jwt

typescript

auth0

angular