Angular localstorage Override issue

Question

我将访问令牌存储在本地存储中，用于系统的身份验证。如果用户A登录，他的访问令牌将在本地存储中设置。在这里之前一切都很好。但同时，若相同项目的另一个选项卡打开并且用户B登录，则他的访问令牌将被写入本地存储，并覆盖用户A的本地存储。如果我重新加载"用户A"选项卡，其内容将更改为"用户B"内容。

Answer 1

生成一个uniqueKey来区分用户。对于真正的应用程序，这将是更独特的，比如UUID。

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
key: string = 'token';
myItem: string;
uniqueKey: number;
localStorageParam: any;
constructor() {
this.uniqueKey = parseInt(Math.random() * 1000000);
localStorage.setItem(this.key + '_' + this.uniqueKey, 'Some Value');
this.localStorageParam = localStorage;
this.myItem = localStorage.getItem(this.key);
}
}

https://stackblitz.com/edit/angular-localstorage-fz9na6?file=src%2Fapp%2Fapp.component.ts

另一种选择是使用sessionStorage。每个用户都有自己的会话和会话数据，缺点当然是当会话结束时(即用户注销、关闭选项卡等(会丢失会话数据https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage