localStorage无法使用Angular

我是ng2的新手，尝试建立一个身份验证系统，使用Laravel作为后端，使用ng2作为前端。我试图在用户登录后获得一个令牌，但我编写的用localStorage存储令牌的代码只工作了一次并停止了工作（在我刷新它之后，它就消失了，不会再设置）

auth.service.ts:

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class AuthService {

constructor(private http: Http){

}

signup(username: string, email: string, password: string){
    return this.http.post('http://localhost:8000/api/user', 
        {name: username, email:email, password:password},
        {headers: new Headers({'X-Requested-With': 'XMLHttpRequest'})});
}

signin(email: string, password: string) {

    return this.http.post('http://localhost:8000/api/user/signin',
        {email: email, password: password},
        {headers: new Headers({'X-Requested-With': 'XMLHttpRequest'})})
            .map(
                (response: Response) => {
                    const token = response.json().token;
                    const base64Url = token.split('.')[1];
                    const base64 = base64Url.replace('-','+').replace('_','/');
                    return {token: token, decoded: JSON.parse(window.atob(base64))};
                }
            ).do(

                tokenData => {
                    localStorage.setItem('token', tokenData.token);
                }

            );
}
}

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignin(form: NgForm){
    this.authService.signin(form.value.email, form.value.password)
        .subscribe(
            tokenData => console.log(tokenData),
            error => console.log(error)
        );
  }

}

<form (ngSubmit)="onSignin(f)" #f="ngForm">
<div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" ngModel class="form-control" required>
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" ngModel class="form-control" required>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!f.valid">Signin</button>

signin.component.ts:

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class AuthService {

constructor(private http: Http){

}

signup(username: string, email: string, password: string){
    return this.http.post('http://localhost:8000/api/user', 
        {name: username, email:email, password:password},
        {headers: new Headers({'X-Requested-With': 'XMLHttpRequest'})});
}

signin(email: string, password: string) {

    return this.http.post('http://localhost:8000/api/user/signin',
        {email: email, password: password},
        {headers: new Headers({'X-Requested-With': 'XMLHttpRequest'})})
            .map(
                (response: Response) => {
                    const token = response.json().token;
                    const base64Url = token.split('.')[1];
                    const base64 = base64Url.replace('-','+').replace('_','/');
                    return {token: token, decoded: JSON.parse(window.atob(base64))};
                }
            ).do(

                tokenData => {
                    localStorage.setItem('token', tokenData.token);
                }

            );
}
}

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignin(form: NgForm){
    this.authService.signin(form.value.email, form.value.password)
        .subscribe(
            tokenData => console.log(tokenData),
            error => console.log(error)
        );
  }

}

<form (ngSubmit)="onSignin(f)" #f="ngForm">
<div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" ngModel class="form-control" required>
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" ngModel class="form-control" required>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!f.valid">Signin</button>

signin.component.html:

import { Injectable } from "@angular/core";
import { Http, Headers, Response } from "@angular/http";
import { Observable } from 'rxjs';
import 'rxjs/Rx';

@Injectable()
export class AuthService {

constructor(private http: Http){

}

signup(username: string, email: string, password: string){
    return this.http.post('http://localhost:8000/api/user', 
        {name: username, email:email, password:password},
        {headers: new Headers({'X-Requested-With': 'XMLHttpRequest'})});
}

signin(email: string, password: string) {

    return this.http.post('http://localhost:8000/api/user/signin',
        {email: email, password: password},
        {headers: new Headers({'X-Requested-With': 'XMLHttpRequest'})})
            .map(
                (response: Response) => {
                    const token = response.json().token;
                    const base64Url = token.split('.')[1];
                    const base64 = base64Url.replace('-','+').replace('_','/');
                    return {token: token, decoded: JSON.parse(window.atob(base64))};
                }
            ).do(

                tokenData => {
                    localStorage.setItem('token', tokenData.token);
                }

            );
}
}

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
import { NgForm } from '@angular/forms';


@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent implements OnInit {

  constructor(private authService: AuthService) { }

  ngOnInit() {
  }

  onSignin(form: NgForm){
    this.authService.signin(form.value.email, form.value.password)
        .subscribe(
            tokenData => console.log(tokenData),
            error => console.log(error)
        );
  }

}

<form (ngSubmit)="onSignin(f)" #f="ngForm">
<div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" ngModel class="form-control" required>
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" ngModel class="form-control" required>
</div>
<button class="btn btn-primary" type="submit" [disabled]="!f.valid">Signin</button>

电子邮件
密码
签名

---

我有一个类似的应用程序，但我只是使用了localStorage，如下所示：

登录（电子邮件：字符串，密码：字符串）{
返回此.http.post（'http://localhost:8000/api/user/signin',
{电子邮件：电子邮件，密码：密码}，
{headers:新的头（{'X-request-With':'XMLHttpRequest'}）
.地图(
（回复：回复）=>{
const token=response.json（）.token；
const base64Url=token.split（'.'）[1]；
const base64=base64Url.replace（'-'，'+'）.replace（''''，'/'）；
setItem（'token'，token）；
返回{token:token，decoded:JSON.parse（window.atob（base64））}；
}
);
}

---

显然，do（）{}部分从未被调用。

我有一个类似的应用程序，但我只是使用localStorage，如下所示：

登录（电子邮件：字符串，密码：字符串）{
返回此.http.post（'http://localhost:8000/api/user/signin',
{电子邮件：电子邮件，密码：密码}，
{headers:新的头（{'X-request-With':'XMLHttpRequest'}）
.地图(
（回复：回复）=>{
const token=response.json（）.token；
const base64Url=token.split（'.'）[1]；
const base64=base64Url.replace（'-'，'+'）.replace（''''，'/'）；
setItem（'token'，token）；
返回{token:token，decoded:JSON.parse（window.atob（base64））}；
}
);
}

---

显然，do（）{}部分从未被调用。

控制台中有错误吗？@Mr_Perfect nope，我从Laravel应用程序中正确地获取了令牌，但它没有保存到本地存储。控制台中有错误吗？@Mr_Perfect nope，我从Laravel应用程序中正确地获取了令牌，但它没有保存到本地存储。这是有道理的，但我已经尝试过了，但它不起作用。。返回块可以工作，但本地存储仍然不能。当我尝试从incognito（chrome）运行脚本时，我确实看到了存储在localStorage中的变量，但刷新后它消失了。@Tom，incognito会话无论如何都应该这样做，我确信如果它在incognito中起作用，它也应该在通常情况下起作用-所以我确信问题不在这里，而在其他地方！我也在一个普通的浏览器中运行了代码（不是匿名的），它在刷新后仍然会清除，并且在下一次试用时不会再次设置。问题可能出在哪里？请检查您的代码-您可能正在其他地方重置它。如果没有所有相关的代码，我们只能做出有根据的猜测，而不能回答一些确定的问题。谢谢你的帮助，我已经用不同的浏览器做了一些测试，问题似乎只发生在chrome上。显然，它确实将数据保存到localStorage，但由于某些原因，它没有在控制台中显示出来…这是有道理的，但我已经尝试过了，但它不起作用。。返回块可以工作，但本地存储仍然不能。当我尝试从incognito（chrome）运行脚本时，我确实看到了存储在localStorage中的变量，但刷新后它消失了。@Tom，incognito会话无论如何都应该这样做，我确信如果它在incognito中起作用，它也应该在通常情况下起作用-所以我确信问题不在这里，而在其他地方！我也在一个普通的浏览器中运行了代码（不是匿名的），它在刷新后仍然会清除，并且在下一次试用时不会再次设置。问题可能出在哪里？请检查您的代码-您可能正在其他地方重置它。如果没有所有相关的代码，我们只能做出有根据的猜测，而不能回答一些确定的问题。谢谢你的帮助，我已经用不同的浏览器做了一些测试，问题似乎只发生在chrome上。显然，它确实将数据保存到localStorage，但由于某些原因，它没有在控制台中显示它。。。