无法获取登录后令牌

问题描述 投票:0回答:2

该代码应该通过API登录通过电子邮件和密码,然后并获取访问令牌,但事实并非如此。在本地存储,没有令牌。当我输入了错误的密码,它显示在状态控制台错误:401,当我输入正确的密码,它不显示任何错误,也是在网络选项卡中的状态是200与正确的密码的要求,所以我觉得它的日志在但不取令牌。

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiService } from '../api.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login1',
  templateUrl: './login1.component.html',
  styleUrls: ['./login1.component.css']
})
export class Login1Component implements OnInit {
loggedIn = false;
loginForm: FormGroup;
  constructor(private api: ApiService, private route: Router, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.loginForm = this.formBuilder.group({
      email: ['', Validators.required],
      password: ['', Validators.required]
    })
  }

  onSubmit() {
    const user = {
      email: this.loginForm.controls.email.value,
      password: this.loginForm.controls.password.value
    };

    this.api.loginUser(user);
    this.api.isUserLoggedIn.subscribe( (val) => {
      this.loggedIn = val;
      this.route.navigate(['/dashboard']);
    });

  }

}

服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  checkStatus = new BehaviorSubject<boolean>(false);
  isUserLoggedIn = this.checkStatus.asObservable();

  readonly loginUrl= 'https://*************';

  constructor(private http: HttpClient) { }

  checkLogin() {
    const token = localStorage.getItem('access_token');
    if(token) {
      this.checkStatus.next(true);
    } else {
      this.checkStatus.next(false);
    }
  }

  loginUser(user: any) {
    return this.http.post(this.loginUrl, user)
    .subscribe((checkUser: any) => {
      if(checkUser.access_token) {
        localStorage.setItem('access_token', checkUser.access_token);
        localStorage.setItem('user', JSON.stringify(checkUser.user));
        return true;
      }
    });
  }

}
angular
2个回答
2
投票

你的代码似乎罚款。幼稚的问题,如果你的API被发送回正确“checkUser.access_token”,它不是不确定你检查?

此外,本地存储不是存储身份验证令牌被推荐的地方。

浏览器本地存储(或会话存储)是不安全的。存储在那里的数据可能会受到跨站点脚本。如果攻击者窃取的令牌,他们可以访问,并请求您的API。

通常与SPA打交道时,你会在内存中使用。 Cookies是也与一定的局限性和关注点的选项。如果您使用的Node.js /快递作为后端我会建议使用https://github.com/expressjs/session的,因为它极有安全的方式设置会话访问令牌帮助。

至于店的令牌,我建议这种阅读:https://auth0.com/docs/security/store-tokens


0
投票

您尝试访问令牌之前等待loginUser

this.api.loginUser(user).subscribe(() => {
    this.api.isUserLoggedIn.subscribe( (val) => {
      this.loggedIn = val;
      this.route.navigate(['/dashboard']);
    });
});

说实话,我甚至不看订阅isUserLoggedIn点。相反,你可以使用在loginUser方法的返回值

this.api.loginUser(user).subscribe((val) => {
   this.loggedIn = val;
   if (val) {
      this.route.navigate(['/dashboard']);
   }
});
热门问题
推荐问题
最新问题