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

Question

我一直在从事一个项目作为实习生，并且是新的意思堆栈 这是我面临的问题， 我被要求创建一个已完成的登录页面，但问题是登录是由公司方认证的。所以基本上在我的登录组件中，我已经实现了以下逻辑。 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 获得的身份验证凭据，并将其重定向到登录页面

请帮助我解决问题所在，我应该在哪里进行更正以及在我的场景中注销时该怎么做。

Answer 1

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

您不需要authService 中的logout() 函数并将header.component.ts 中的onLogout() 函数更改为：

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