Question

我从头开始创建登录应用程序。一切正常，除了我尝试登录然后退出的情况，在我尝试再次登录后，我得到了这个的错误：

namespace App\Providers;
use Illuminate\Support\ServiceProvider;
class ViewComposerServiceProvider extends ServiceProvider {
    public function boot() {
        view()->composer('*',"App\Http\ViewComposers\TestViewComposer");
    }
}

以下是2个文件的代码。首先是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)。注入Auth.service的用户服务，这是我与后端服务器通信的第二个文件。

auth.service.js

login-form.component.js

登录-form.component.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');
  }
}

我正在调用函数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()

我认为＆＃34;绑定＆＃34;但不知道从哪里开始。如果你有任何提示如何处理这个问题，我将不胜感激。

Answer 1

这是因为您在注销方法中意外将该功能设置为null。

logout() {
   this.authenticateUser = null;
    ...
}

您的意思是将authToken设置为null吗？

角度误差this.method不是一个函数

1 个答案: