Question

我正在使用localStorage作为身份验证令牌。要保存它，我正在使用localStorage.setItem('token','value')，要删除它，我正在使用localStorage.clear()，两者都可以正常工作。但是，当我以其他用户身份登录时，服务构造函数将一直发送之前从localStorage()中实际删除的先前令牌。服务构造函数在下面

  token: string;
  constructor(private http: HttpClient) {
    const user = JSON.parse(localStorage.getItem('eq_user'));
    if ( user ) {
      this.token = user.access_token;
    }
  }

登录：

login() {
  this.auth.login(data).subscribe((response: UserToken) => {
    localStorage.setItem('eq_user', JSON.stringify(response));
    this.router.navigate([this.returnUrl]);
  },
  error => {
    this.error = true;
    this.errorMsg = error.message;
  }
}

注销

onLogout() {
    localStorage.removeItem('eq_user');
    localStorage.clear();
    this.authService.logout().subscribe( s => {
        this.route.navigate(['login']);
   });
  }

以下链接与我的问题相同。

https://stackblitz.com/

首先单击setValue，然后单击“组件”中的A和“服务”中的A，这将是第一次使用正确的值。但是，当再次单击setValue并单击其他两个按钮时，Component按钮将返回新值，但服务不会返回新值。

Answer 1

请参见，角度服务是在根目录中声明的单例服务。因此，您的构造函数将仅被调用一次，并在那时存储令牌。因此，当您清除本地存储时，必须清除变量。您可以在服务中创建一个清除函数来清除令牌变量。并在注销时调用该函数。

Answer 2

单例服务的构造函数仅在应用程序加载期间被调用一次。我认为您的服务是单身人士。因此，构造函数内部编写的逻辑不会执行多次。您还必须在登录方法中设置令牌，该方法在每次用户登录时运行。还要在用户注销时删除令牌。

login() {
    this.auth.login(data).subscribe((response: UserToken) => {
      this.token = response.access_token;
      localStorage.setItem('eq_user', JSON.stringify(response));
      this.router.navigate([this.returnUrl]);
    },
    error => {
      this.error = true;
      this.errorMsg = error.message;
    }
  }


onLogout() {
    this.token = null;
    localStorage.removeItem('eq_user');
    localStorage.clear();
    this.authService.logout().subscribe( s => {
        this.route.navigate(['login']);
   });
  }

我已经通过上面提到的更改更新了您的示例stackblitz代码-https://stackblitz.com/edit/angular-cz5huh

Answer 3

花了将近一天的时间发送新令牌后，我想到了可以使用HttpInterceptor轻松完成的解决方案，如果您为标头定义了自定义拦截器，则无需查看对于您服务中的令牌，拦截器会将Bearer TOKEN添加到所有http requrest。

Click here for more details

Angular 8在注销时清除localStorage

3 个答案: