首页 > 解决方案 > 是否有使用 ng-toolkit/universal 注入本地存储的不同方法?

问题描述

我正在使用服务(身份验证服务)来检查用户是否保存在本地存储中以保存新用户或获取用户是否已经保存现在我想使用 Angular 通用构建所以本地存储会导致错误所以下载了包@ng-toolkit/universal,我像文档一样注入了localstorage,但这会导致所有使用localstorage的函数抛出并出错

这是一个使用 Angular 8、Angular Universal 的新 Angular 应用程序,@ng-toolkit/universal

import { LOCAL_STORAGE } from "@ng-toolkit/universal";

@Injectable({
  providedIn: "root"
})
export class AuthService {
  user: User;
  userLoggedIn = new Subject();

  constructor(
    private _http: HttpClientService,
    @Inject(LOCAL_STORAGE) public localStorage
  ) {}
  get isLogin() {
    if (localStorage.getItem("user")) {
      this.user = JSON.parse(localStorage.getItem("user"));
      this.userLoggedIn.next();
      return JSON.parse(localStorage.getItem("user"));
    }
  }

  register(body) {
    return this._http.post(body, "user/register");
  }
  login(body) {
    return this._http.post(body, "user/login");
  }
  saveUser(user) {
    localStorage.setItem("user", JSON.stringify(user));
    this.user = user;
  }
  updateProfile(body) {
    return this._http.post(body, "auth/applicant/profile/create-general-info");
  }

  get Token() {
    if (localStorage.getItem("user")) {
      try {
        return JSON.parse(localStorage.getItem("user")).token;
      } catch (e) {
        console.log(e);
      }
    }
  }

  // Get User Role
  get Role() {
    if (localStorage.getItem("user")) {
      try {
        return JSON.parse(localStorage.getItem("user")).role.role;
      } catch (e) {
        console.log(e);
      }
    }
  }

  get UserId() {
    if (localStorage.getItem("user")) {
      return JSON.parse(localStorage.getItem("user")).id;
    }
  }
  get User() {
    if (localStorage.getItem("user")) {
      return JSON.parse(localStorage.getItem("user"));
    }
  }

我希望这些函数能像注入之前一样正常和正确地工作,但它们现在不是函数抛出错误主要是 isLogin 和 Token

标签: angularangular-universalangular8

解决方案


答案是不。您不能localStorage在 Angular Universal 中使用。特殊注入只是为了能够编译代码。但localStorage仅存在于用户的浏览器中,在服务器上不可用。您可以使用isPlatformBrowser来检查是否localStorage可用。它在本文中描述


推荐阅读