angular – ReferenceError:未定义localStorage
发布时间:2020-12-17 17:33:42 所属栏目:安全 来源:网络整理
导读:我正在尝试使用Angular和ASP.NET Core进行用户身份验证. 我按照这里的教程: https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core 我按照所有步骤没有任何错误. 该应用运行,但当我去“/ register”或“/ login”路线时,我
我正在尝试使用Angular和ASP.NET Core进行用户身份验证.
我按照这里的教程: https://fullstackmark.com/post/10/user-authentication-with-angular-and-asp-net-core 我按照所有步骤没有任何错误. 该应用运行,但当我去“/ register”或“/ login”路线时,我明白了 NodeInvocationException: Uncaught (in promise): ReferenceError: localStorage is not defined ReferenceError: localStorage is not defined 使用它的服务是: import { Injectable,Inject } from '@angular/core'; import { Http,Response,Headers,RequestOptions } from '@angular/http'; import { UserRegistration } from '../shared/models/user.registration.interface'; import { ConfigService } from '../shared/utils/config.service'; import { BaseService } from "./base.service"; import { Observable } from 'rxjs/Rx'; import { BehaviorSubject } from 'rxjs/Rx'; //import * as _ from 'lodash'; // Add the RxJS Observable operators we need in this app. import '../rxjs-operators'; @Injectable() export class UserService extends BaseService { baseUrl: string = ''; // Observable navItem source private _authNavStatusSource = new BehaviorSubject<boolean>(false); // Observable navItem stream authNavStatus$= this._authNavStatusSource.asObservable(); private loggedIn = false; constructor(private http: Http,private configService: ConfigService) { super(); this.loggedIn = !!localStorage.getItem('auth_token'); // ?? not sure if this the best way to broadcast the status but seems to resolve issue on page refresh where auth status is lost in // header component resulting in authed user nav links disappearing despite the fact user is still logged in this._authNavStatusSource.next(this.loggedIn); this.baseUrl = configService.getApiURI(); } register(email: string,password: string,firstName: string,lastName: string,location: string): Observable<UserRegistration> { let body = JSON.stringify({ email,password,firstName,lastName,location }); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.post(this.baseUrl + "/accounts",body,options) .map(res => true) .catch(this.handleError); } login(userName: any,password: any) { let headers = new Headers(); headers.append('Content-Type','application/json'); return this.http .post( this.baseUrl + '/login',JSON.stringify({ userName,password }),{ headers } ) .map(res => res.json()) .map(res => { localStorage.setItem('auth_token',res.auth_token); this.loggedIn = true; this._authNavStatusSource.next(true); return true; }) .catch(this.handleError); } logout() { localStorage.removeItem('auth_token'); this.loggedIn = false; this._authNavStatusSource.next(false); } isLoggedIn() { return this.loggedIn; } } 注册ts是: import { Component,OnInit,Inject } from '@angular/core'; import { Router } from '@angular/router'; import { UserRegistration } from '../../shared/models/user.registration.interface'; import { UserService } from "../../services/user.service"; declare var localStorage: any; @Component({ selector: 'app-registration-form',templateUrl: './registration-form.component.html' }) export class RegistrationFormComponent implements OnInit { errors: string; isRequesting: boolean; submitted: boolean = false; constructor(private userService: UserService,private router: Router) { } ngOnInit() { } registerUser({ value,valid }: { value: UserRegistration,valid: boolean }) { this.submitted = true; this.isRequesting = true; this.errors=''; if(valid) { this.userService.register(value.email,value.password,value.firstName,value.lastName,value.location) .finally(() => this.isRequesting = false) .subscribe( result => {if(result){ this.router.navigate(['/login'],{queryParams: {brandNew: true,email:value.email}}); }},errors => this.errors = errors); } } } 登录名是: import { Subscription } from 'rxjs'; import { Component,OnDestroy } from '@angular/core'; import { Router,ActivatedRoute } from '@angular/router'; import { Credentials } from '../../shared/models/credentials.interface'; import { UserService } from '../../services/user.service'; @Component({ selector: 'app-login-form',templateUrl: './login-form.component.html' }) export class LoginFormComponent implements OnInit,OnDestroy { private subscription: Subscription; brandNew: boolean; errors: string; isRequesting: boolean; submitted: boolean = false; credentials: Credentials = { email: '',password: '' }; constructor(private userService: UserService,private router: Router,private activatedRoute: ActivatedRoute) { } ngOnInit() { // subscribe to router event this.subscription = this.activatedRoute.queryParams.subscribe( (param: any) => { this.brandNew = param['brandNew']; this.credentials.email = param['email']; }); } ngOnDestroy() { // prevent memory leak by unsubscribing this.subscription.unsubscribe(); } login({ value,valid }: { value: Credentials,valid: boolean }) { this.submitted = true; this.isRequesting = true; this.errors=''; if (valid) { this.userService.login(value.email,value.password) .finally(() => this.isRequesting = false) .subscribe( result => { if (result) { this.router.navigate(['/home']); } },error => this.errors = error); } } } 我尝试了以下解决方案: localStorage is not defined (Angular Universal) 但它不起作用…… 我错过了什么 解决方法
您可以使用标准API进行本地存储,例如
localStorage.setItem(k,v) 和 localStorage.getItem(k) 但是如果你想要一个有角度的解决方案,并为本地存储找到一个好的库,我正在使用的就是这个 https://github.com/marcj/angular2-localstorage 也 https://www.npmjs.com/package/angular2-cool-storage 很酷的使用. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |