Question

我在刷新页面时丢失了角色类型，我做了类似用户Admin的操作显示仪表板按钮和登录的用户，我从服务器获取JWT令牌，并将其放入本地存储中，并放入令牌userID和Role

在我的服务中，我使用BehaviorSubject作为字符串并且我有功能使用令牌，并将其拆分为主体的一部分并充当角色，然后对其进行解码

因此，如果您可以帮助我或类似我的建议（我看到了这样的建议，但所有人都说将值存储在LocalStorage中，而我已经把它存储了

AccountServicesService

test$ :BehaviorSubject<string> = new BehaviorSubject('') ;

Login(log: LoginModel): Observable<any> {
   return this.http.post<any>(this.HTTP_URL + 'ApplicationUser/Login' ,
   log, this.headers).pipe(map(x=> {
   this.test$.next(this.roleTypeForCheck(x.token));
   return x;
}));
}

roleTypeForCheck(token): string {
var payLoad = JSON.parse(window.atob(token.split('.')[1]));
var userRole = payLoad.role;
return userRole;
}

LoginComponent

login(){
if(this.loginForm.valid){
  this.validatLoginModel();
  this.service.Login(this.log).subscribe((res:any) => {
    localStorage.setItem('token',res.token);
    this.route.navigate(['home']);
  }, err => {
    if(err.status === 401){
      this.message = 'Email is not confirmed yet!!..Check Your Email';
    } else if(err.status === 400){
      this.message = 'username or password is incorrect';
    } else if(err.status === 500) {
      this.message = 'something wrong..try again later';
    }
    console.log(err);
  });
}
}

NavBarComponent.ts

ngOnInit(): void {
console.log('init');
this.serv.test$.subscribe(res =>{
  this.userRole = res;
  console.log('subscr');
},err =>{
  alert(err.error);
});

NavBarComponent.html

<li class="nav-item">
    <a class="nav-link" routerLink="dashboard" *ngIf="(this.userRole) === 'Admin'">Dashboard</a>
  </li>

Answer 1

我假设您不希望用户刷新页面后再次登录。您已经将令牌存储在localStorage中，但刷新后必须从同一位置读取它。您可以在AccountServicesService中添加一个方法，例如：

  getTokenFromLocalStorageWithoutLogin() {
    const token = localStorage.getItem('token');
    this.test$.next(this.roleTypeForCheck(token));
  }

刷新页面角度8时丢失数据

1 个答案: