时间戳

首页 > 解决方案 > 平均堆栈中的注销按钮功能，如何使会话过期？

node.js - 平均堆栈中的注销按钮功能，如何使会话过期？

问题描述

我一直以实习生的身份从事一个项目，并且是新的意味着堆栈这是我面临的问题，我被要求创建一个已完成的登录页面，但问题是登录是由公司方认证的。所以基本上在我的登录组件中，我已经实现了以下逻辑。login.component.ts 文件的组件如下所示

onSubmit(event) {
    event.preventDefault()
    console.log('value',this.loginForm.value)

    if(this.errorMail.length === 0) {
      this.loginService.login(this.loginForm.value).subscribe((res:any) => {
        console.log('login response', res)
        if(res.auth.success === true) {
          localStorage.setItem('auth', JSON.stringify(res.auth))
          this.loginService.loggedIn$.next(res.auth)
          this.router.navigateByUrl('/search/list')
        } else {
        this.errorMail='Email or password is not valid'
        }
      })
    }

以下是login.service.ts

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

interface LoginResponse {
  success: boolean
}

@Injectable({
  providedIn: 'root'
})

export class LoginService {

  constructor(private http: HttpClient) { }
  loggedIn$ = new BehaviorSubject(null)
login(creds) {
    // console.log('creds',creds)
   return this.http.post<LoginResponse>('url-of-company', {creds})
  }

在我有注销按钮的标题组件中： header.component.ts 的内容；

import { Router } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { HeaderService } from './header.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(public authService: HeaderService,public router:Router) { }
  onLogout(){
    this.authService.logout();
this.router.navigateByUrl('/');
  }

上面代码中的 authService 是从 header.service.ts 导入的，而 header.service.ts 就像这样；

import { LoginService } from './../../login/login.service';
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { Router } from '@angular/router';

interface LoginResponse {
  success: boolean
}

export class HeaderService{

  constructor(private router: Router,private http: HttpClient,private user:LoginService) {}
 logout() {
    this.http.delete<LoginResponse>('url-of-comapy');
    this.router.navigate(['/']);
  }

基本上我正在尝试删除我从公司 url-of-company 获得的身份验证凭据，并将其重定向到登录页面

请帮助我解决问题所在以及在我的场景中我应该在哪里进行更正以及如何注销。

标签： node.jsangulartypescriptangular-materialmean-stack

解决方案

我认为您需要做的是从数据库中删除凭据，这是您在上面的函数localStorage中尝试执行的操作。logout()

您不需要该logout()功能authService并将您的onLogout()功能更改header.component.ts为：

onLogout(){
  localStorage.removeItem('auth');
  this.router.navigateByUrl('/login');
}

推荐阅读