我正在尝试编写代码来检查浏览器的本地存储，看看是否有键或带有用户键的对象

Question

我是新来的角，我得到错误">类型'string | null'的参数不能分配给类型'string'的参数。'null'类型不能赋值给'string'类型。"，当我试图编写代码，检查是否有一个对象或关键字与用户的关键字在浏览器的本地存储。这里有一个截图供参考

app.component.ts

import { HttpClient } from '@angular/common/http';
import { error } from '@angular/compiler/src/util';
import { Component, OnInit } from '@angular/core';
import { AccountService } from '_services/account.service';
import { User } from './_models/user';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'High';
users :any;

constructor(private http: HttpClient, private accountService: AccountService) {  }

ngOnInit() {
this.getUsers();
this.setCurrentUser();
}

setCurrentUser()
{
const user : User  = JSON.parse(localStorage.getItem('user'));
this.accountService.setCurrentUser(user);
}

getUsers()
{
this.http.get('https://localhost:5001/api/users').subscribe(response =>
{
this.users = response;
},
error =>
{
console.log(error);
})
}

}

accountService.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { map } from "rxjs/operators";
import { User } from 'src/app/_models/user';
@Injectable({
providedIn: 'root'
})
export class AccountService {
baseUrl = 'https://localhost:5001/api/';
private currentUserSource = new ReplaySubject<User |null>(1);
currentUser$ = this.currentUserSource.asObservable();
constructor(private http: HttpClient) { }
login(model: any) {
return this.http.post<User>(this.baseUrl + 'account/login', model).pipe(
map((response: User) => {
const user = response;
if (user) {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSource.next(user);
}
});
)
}
setCurrentUser(user: User) {
this.currentUserSource.next(user);
}
logout() {
localStorage.removeItem('user');
this.currentUserSource.next(null);
}
}

user.ts

export interface User {
username: string ;
token: string;
}

Answer 1

localStorage。getItem可以返回字符串或null，因此类型推断是(string | null)。因为JSON。解析只接受字符串，你会看到TS编译器的错误。

你可以这样修改你的函数:

setCurrentUser() {
const user = localStorage.getItem('user');
if(user) {
this.accountService.setCurrentUser(JSON.parse(user));
}
}

Answer 2

程序没有实际运行，因此本地存储可能为空。在当前

中执行此操作

setCurrentUser()
{
**const user : User  = JSON.parse(localStorage.getItem('user')||'');**
this.accountService.setCurrentUser(user);
}

在所有试图从本地存储获取数据的地方进行这些更改。