localStorage Angular 4不可访问

我正在build立一个使用angular 4和nodejs的网站。 当我尝试login时， node将数据发送到angular度，这很好。 它只是当我尝试login时，数据不会被存储在本地存储。

这是auth.services.ts的代码

 import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import 'rxjs/add/operator/map'; import { tokenNotExpired } from 'angular2-jwt'; import { Router } from '@angular/router'; //import { User } from '../../User'; @Injectable() export class AuthService { authToken: any; user: any; constructor(private http:Http, private router: Router) { console.log("authorization service initialized..."); } signIn(user) { let headers = new Headers(); headers.append('Content-Type', 'application/json'); return this.http.post('http://localhost:3000/users/login', JSON.stringify(user), {headers: headers}) .map(res => res.json()); } storeUserData(token, user) { console.log("storeuserdata"); localStorage.setItem('id_token', token); localStorage.setItem('user', JSON.stringify(user)); this.authToken = token; this.user = user; } logout() { this.authToken = null; this.user = null; localStorage.clear(); this.router.navigateByUrl('/'); } getProfile() { let headers = new Headers(); this.loadToken(); headers.append('Authorization', this.authToken); headers.append('Content-type', 'application/json'); return this.http.get('http://localhost:3000/users/profile', {headers: headers}) .map(res => res.json()); } loadToken() { this.authToken = localStorage.getItem('id_token'); } loggedIn() { return tokenNotExpired(); } } 

这是navbar.component.ts，因为它包含login部分

 import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators} from '@angular/forms'; import { Router } from '@angular/router'; import { AuthService } from '../../services/auth.service'; //import { User } from '../../../User'; @Component({ moduleId: module.id, selector: 'navbar', templateUrl: `./navbar.component.html`, }) export class NavBarComponent implements OnInit{ signInForm: FormGroup; constructor(private authService: AuthService, private router: Router) {} OnSignIn() { const user = { email: this.signInForm.value.email, password: this.signInForm.value.password }; this.authService.signIn(user) .subscribe( data => { console.log(data); if (data.success) { this.authService.storeUserData(data.token, data.user); this.router.navigateByUrl('profile'); } else { } }, error => console.log(error) ); this.signInForm.reset(); } ngOnInit() { this.signInForm = new FormGroup({ email: new FormControl(null, [ Validators.required, Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?") ]), password: new FormControl(null, Validators.required) }); } onLogout() { this.authService.logout(); } } 

这是我尝试login时收到的内容

 Object {success: true, token: "JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyIkX18iO…Tc0fQ.rte25znZW9oASt-6scViAbA37W1DzXxCcg0Z_CMKWTY", user: Object} 

而且我也从js节点获得成功。

当我build立这个网站时，我使用的是angular2。我忙于上课，没有时间完成它，angular4被释放。 我将所有代码复制到一个新的目录，并确保所有的节点模块都是从开始构build的。

这是我以前的package.json：

 { "name": "angular-src", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^2.4.0", "@angular/compiler": "^2.4.0", "@angular/core": "^2.4.0", "@angular/forms": "^2.4.0", "@angular/http": "^2.4.0", "@angular/platform-browser": "^2.4.0", "@angular/platform-browser-dynamic": "^2.4.0", "@angular/router": "^3.4.0", "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.20", "angular2-jwt": "^0.1.28", "core-js": "^2.4.1", "ng2-uploader": "^2.0.0", "ngx-uploader": "^2.2.5", "rxjs": "^5.1.0", "zone.js": "^0.7.6" }, "devDependencies": { "@angular/cli": "^1.0.0", "@angular/compiler-cli": "^2.4.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.4.2", "typescript": "~2.0.0" } } 

这是新的package.json

 { "name": "angular-src", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "angular2-jwt": "^0.2.3", "core-js": "^2.4.1", "ngx-uploader": "^3.0.5", "rxjs": "^5.1.0", "zone.js": "^0.8.4" }, "devDependencies": { "@angular/cli": "1.0.6", "@angular/compiler-cli": "^4.0.0", "@types/jasmine": "2.5.38", "@types/node": "~6.0.60", "codelyzer": "~2.0.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-coverage-istanbul-reporter": "^0.2.0", "protractor": "~5.1.0", "ts-node": "~2.0.0", "tslint": "~4.5.0", "typescript": "~2.2.0" } } 

当我使用旧版本的node_modules运行应用程序时，它可以正常工作，但是当我使用新版本时，用户从不login。