刷新页面时丢失数据 angular 8

Question

我在刷新页面时丢失了我的角色类型我做了类似如果用户管理员显示仪表板按钮和用户登录我从服务器获取 JWT 令牌并将其放入本地存储和令牌用户 ID 和角色内

在我的服务中，我使用 BehaviorSubject 作为字符串我有功能获取令牌并将其拆分为 body 的一部分并担任角色然后对其进行解码

所以如果你能帮助我或类似我的问题（我看到了这个问题，但所有人都说把值放在 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;
}

登录组件

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));
  }

刷新页面时丢失数据 angular 8

loss data when refresh page angular 8

observable

rxjs

behaviorsubject

angular8