我正在从头开始创建一个登录应用程序。一切正常,除了一种情况,我尝试登录然后注销,在我尝试再次登录后,我得到了这个 错误:
LoginFormComponent.html:23 ERROR TypeError: this.authService.authenticateUser is not a function
at LoginFormComponent.onLoginSubmit (login-form.component.ts:50)
at Object.eval [as handleEvent] (LoginFormComponent.html:23)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:10587)
at HTMLButtonElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)
这是来自 2 个文件的代码。首先是 Auth.service。注入(inject)到 login-form.component.js
中的用户服务,这是我与后端服务器通信的第二个文件。
auth.service.js
import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import {tokenNotExpired} from 'angular2-jwt';
@Injectable()
export class AuthService {
authToken: any;
user: any;
constructor(private http: Http) {}
registerUser(user) {
const headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:3000/users/register', user, {headers: headers})
.map(res => res.json());
}
authenticateUser(user) {
const headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:3000/users/authenticate', user, {headers: headers})
.map(res => res.json());
}
getProfile() {
const 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());
}
storeUserData(token, user) {
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authenticateUser = token;
this.user = user;
}
loadToken() {
const token = localStorage.getItem('id_token');
this.authToken = token;
}
logout() {
this.authenticateUser = null;
this.user = null;
localStorage.clear();
}
loggedIn() {
return tokenNotExpired('id_token');
}
}
login-form.component.js
import {Component, OnInit, EventEmitter, Output} from '@angular/core';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/';
import {MatIconModule} from '@angular/material/';
import {Router} from '@angular/router';
import { FormControl, Validators, FormGroup, FormBuilder, FormGroupDirective, NgForm} from '@angular/forms';
import {AuthService} from '../../services/auth.service';
import {MatSnackBar, MatSnackBarConfig} from '@angular/material';
@Component({
selector: 'app-login-form',
templateUrl: './login-form.component.html',
styleUrls: ['./login-form.component.scss']
})
export class LoginFormComponent implements OnInit {
showError: boolean;
error: String;
loginForm: any;
// authService: AuthService;
constructor(
private router: Router,
private readonly formBuilder: FormBuilder,
private snackBar: MatSnackBar,
private authService: AuthService) {
this.loginForm = formBuilder.group({
username: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(30)]]
});
}
trigger = false;
isLoginPassed = false;
@Output() public LoginEvent = new EventEmitter();
closeLoginForm() {
this.trigger = false;
this.LoginEvent.emit(this.trigger);
}
openSnackBar(msg: String, color: String) {
// open Box that shows if the account has been been logged in
this.snackBar.open( msg.toString() , 'Close', {
duration: 3000,
panelClass: [color.toString()]
});
}
onLoginSubmit() {
const user = {
username: this.loginForm.controls['username'].value,
password: this.loginForm.controls['password'].value
};
this.authService.authenticateUser(user).subscribe(data => {
if (data.success) {
this.authService.storeUserData(data.token, data.user);
this.openSnackBar('You have been logged in', 'confirm');
this.router.navigate(['main']);
this.closeLoginForm();
} else {
this.loginForm.reset();
this.openSnackBar(data.message, 'warning');
}
});
}
ngOnInit() {
}
}
我调用函数的 HTML onLoginSubmit()
<div class="wrapper" *ngIf="!isLoginPassed">
<div class="logInWindow">
<div class="title">
<h1>Log In to BANDZ account </h1>
<div class="x" (click)=closeLoginForm()></div>
</div>
<div class="Container">
<form action="" method="post" [formGroup]="loginForm" class="form form-login">
<mat-form-field>
<mat-label>
<mat-icon>email</mat-icon>
Username
</mat-label>
<input type="text" matInput placeholder="Please provide your username" formControlName="username">
</mat-form-field>
<mat-form-field>
<mat-label>
<mat-icon>lock-outline</mat-icon>
Password
</mat-label>
<input type="password" matInput placeholder="Please provide your password" formControlName="password">
</mat-form-field>
<button [disabled]="!loginForm.valid" (click)="onLoginSubmit()" mat-raised-button>Log in</button>
<a id="lostPassword" href="#">Lost your password?</a>
<br>
<a id="registerAccount" href="#">Don't have an account?</a>
</form>
</div>
</div>
</div>
我认为“绑定(bind)”有问题,但不知道从哪里开始。如果您有任何关于如何处理此问题的提示,我将不胜感激。
最佳答案
这是因为您在注销方法中不小心将该函数设置为 null
。
logout() {
this.authenticateUser = null;
...
}
您是否打算将 authToken
设置为 null
?
关于 Angular 错误 this.method 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49663453/