- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在尝试使用 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 is not defined (Angular Universal)
但它不起作用......
我错过了什么
最佳答案
你可以使用本地存储的标准 API,比如
localStorage.setItem(key, val)
和
localStorage.getItem(key)
但是如果你想要一个 Angular 解决方案并找到一个好的本地存储库,我正在使用的是这个
https://github.com/marcj/angular2-localstorage
还有
https://www.npmjs.com/package/angular2-cool-storage
用起来很酷。
关于angular - 引用错误 : localStorage is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46072312/
我已经使用 vue-cli 两个星期了,直到今天一切正常。我在本地建立这个项目。 https://drive.google.com/open?id=0BwGw1zyyKjW7S3RYWXRaX24tQ
您好,我正在尝试使用 python 库 pytesseract 从图像中提取文本。请找到代码: from PIL import Image from pytesseract import image_
我的错误 /usr/bin/ld: errno: TLS definition in /lib/libc.so.6 section .tbss mismatches non-TLS reference
我已经训练了一个模型,我正在尝试使用 predict函数但它返回以下错误。 Error in contrasts<-(*tmp*, value = contr.funs[1 + isOF[nn]])
根据Microsoft DataConnectors的信息我想通过 this ODBC driver 创建一个从 PowerBi 到 PostgreSQL 的连接器使用直接查询。我重用了 Micros
我已经为 SoundManagement 创建了一个包,其中有一个扩展 MediaPlayer 的类。我希望全局控制这个变量。这是我的代码: package soundmanagement; impo
我在Heroku上部署了一个应用程序。我正在使用免费服务。 我经常收到以下错误消息。 PG::Error: ERROR: out of memory 如果刷新浏览器,就可以了。但是随后,它又随机发生
我正在运行 LAMP 服务器,这个 .htaccess 给我一个 500 错误。其作用是过滤关键字并重定向到相应的域名。 Options +FollowSymLinks RewriteEngine
我有两个驱动器 A 和 B。使用 python 脚本,我在“A”驱动器中创建一些文件,并运行 powerscript,该脚本以 1 秒的间隔将驱动器 A 中的所有文件复制到驱动器 B。 我在 powe
下面的函数一直返回这个错误信息。我认为可能是 double_precision 字段类型导致了这种情况,我尝试使用 CAST,但要么不是这样,要么我没有做对...帮助? 这是错误: ERROR: i
这个问题已经有答案了: Syntax error due to using a reserved word as a table or column name in MySQL (1 个回答) 已关闭
我的数据库有这个小问题。 我创建了一个表“articoli”,其中包含商品的品牌、型号和价格。 每篇文章都由一个 id (ID_ARTICOLO)` 定义,它是一个自动递增字段。 好吧,现在当我尝试插
我是新来的。我目前正在 DeVry 在线学习中级 C++ 编程。我们正在使用 C++ Primer Plus 这本书,到目前为止我一直做得很好。我的老师最近向我们扔了一个曲线球。我目前的任务是这样的:
这个问题在这里已经有了答案: What is an undefined reference/unresolved external symbol error and how do I fix it?
我的网站中有一段代码有问题;此错误仅发生在 Internet Explorer 7 中。 我没有在这里发布我所有的 HTML/CSS 标记,而是发布了网站的一个版本 here . 如您所见,我在列中有
如果尝试在 USB 设备上构建 node.js 应用程序时在我的树莓派上使用 npm 时遇到一些问题。 package.json 看起来像这样: { "name" : "node-todo",
在 Python 中,您有 None单例,在某些情况下表现得很奇怪: >>> a = None >>> type(a) >>> isinstance(a,None) Traceback (most
这是我的 build.gradle (Module:app) 文件: apply plugin: 'com.android.application' android { compileSdkV
我是 android 的新手,我的项目刚才编译和运行正常,但在我尝试实现抽屉导航后,它给了我这个错误 FAILURE: Build failed with an exception. What wen
谁能解释一下?我想我正在做一些非常愚蠢的事情,并且急切地等待着启蒙。 我得到这个输出: phpversion() == 7.2.25-1+0~20191128.32+debian8~1.gbp108
我是一名优秀的程序员,十分优秀!