localStorage 未在 Angular 4 中定义答案

【问题标题】：localStorage is not defined in angular 4localStorage 未在 Angular 4 中定义
【发布时间】：2019-01-05 01:08:54
【问题描述】：

我在 Angular 4 中有一个 Guard，但是当我尝试访问受保护的路由时，浏览器显示此错误：

NodeInvocationException: Uncaught (in promise): ReferenceError: localStorage is not defined

这是我的卫兵：

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from "rxjs/Observable";

@Injectable()
export class ProtectGuard implements CanActivate {
    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        console.warn("validando");
        if (localStorage.getItem('ex-token'))
            return true;
        this.router.navigate(['/login']);
        return false;
    }
}

我不知道是什么原因造成的，在此先感谢。

【问题讨论】：

您是否尝试过重新启动计算机？我看不出你的代码有任何问题。所以也许这只是你的开发系统中的一个未定义状态。
我试过了，但这并不能解决我的问题，谢谢
你在哪里运行这个服务？客户端还是服务器？如果答案是服务器，那么我的答案是：在服务器端不存在 localStorage，因为它必须由浏览器提供。
我正在测试一个带有角度模板的.net核心项目，当我运行该项目时都在IIS服务器上运行，我认为不是localstorage不存在的情况，因为它允许我将对象添加到本地存储（从组件），我可以在浏览器中看到它，但是当我尝试从守卫获取（或添加）一个对象到本地存储时，我收到此错误
我认为您在将对象设置到其中之前尝试获取 localStorage 对象。最好在获取对象之前明确您尝试设置对象的位置

标签： angular local-storage

【解决方案1】：

这很奇怪。您是否能够从其他服务访问 localStorage 中的项目？我在想的是一种代理服务。这只是一个数字划痕：

本地存储服务

setItem(item: any, key: string): void {
    localStorage.setItem(key, item);
}

getItem(key: string): any {
    return localStorage.getItem(key);
}

你的卫士

constructor (private localStorageService: LocalStorageService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    console.warn("validando");
    if (this.localStorageService.getItem('ex-token'))
        return true;

...

也许这可以做正确的工作。仍然无法解释为什么 localStorage 在您的服务中无法访问。

【讨论】：

他们帮我解决了我遇到的问题，他们告诉我“与服务器对应的部分代码使用了本地存储”，我不得不使用第三方工具，我是推荐npmjs.com/package/angular2-cool-storage，它已经奏效了。非常感谢