[解決済み] ReferenceError: localStorageが定義されていません。
2022-02-08 14:42:35
質問
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, OnInit,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が定義されていない (Angular Universal)
が、うまくいきません...。
何が足りないのか
解決方法は?
ローカルストレージの標準的なAPIを使用することができます。
localStorage.setItem(key, val)
そして
localStorage.getItem(key)
しかし、もしあなたがこのためのangularソリューションを求めていて、localstorageのための良いライブラリを見つけたいなら、私が使っているのはこれです。
https://github.com/marcj/angular2-localstorage
また
https://www.npmjs.com/package/angular2-cool-storage
は、使っていてかっこいい。
関連
-
[解決済み】VSCodeはモジュール'@angular/core'や他のモジュールを見つけることができません。
-
[解決済み】serveコマンドを使用するには、angular-cliプロジェクト内にいる必要があります。
-
[解決済み】Angular2 CLI エラー "@angular/compiler-cli" パッケージが正しくインストールされていません。
-
[解決済み】エラー。どのルートにもマッチしません。URLセグメント: - Angular 2
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] Angular 4: コンポーネントファクトリが見つかりません。@NgModule.entryComponents に追加しましたか?
-
[解決済み] Angular "未定義のプロパティ 'subscribe' を読み取ることができません".
-
[解決済み] NullInjectorError: MatDialogRef 用のプロバイダがありません
-
[解決済み] Angular 2でディレイを作成する方法
-
[解決済み] Angularアプリのシンタックスエラー。予期しないトークン <
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】angular 4アプリにReactiveFormsModuleを追加すると、NgControl用のプロバイダがないエラーが発生する。
-
[解決済み】「ルーターリンク」は既知のプロパティではないため、バインドできない
-
[解決済み] テンプレートパースエラーです。'mat-icon' は既知の要素ではありません。
-
[解決済み] NullInjectorError: MatDialogRef 用のプロバイダがありません
-
[解決済み] イオン4オブザーバブル
-
[解決済み] Angular 2 ルーターベースなし href = "/stock/stock_detail.html?
-
[解決済み] Angular 2.0 翻訳パイプが見つかりません。
-
[解決済み] ionInputとionChangeで有意差あり
-
[解決済み] ローカルのワークスペース・ファイル('angular.json')が見つかりませんでした。しかし、同じコードが別のコンピュータで動作します
-
[解決済み] Angular 2の「コンポーネント」は既知の要素ではありません。