Web 应用程序项目 Angular 13 中的授权问题

Question

我在 angular 13 版本的项目中遇到授权问题。在 angular 10 中一切正常，但是当我将项目从 angular 10 升级到 angular 13 时，我收到如下图所示的失败消息 enter image description here

下面是我的 TokenStorage class 代码：

import { Injectable } from '@angular/core';
const TOKEN_KEY = 'AuthToken';
const USERNAME_KEY = 'AuthUsername';
const AUTHORITIES_KEY = 'AuthAuthorities';

@Injectable()
export class TokenStorage {

     roles: string[] = [];
    constructor(){}

    signOut(){
        window.sessionStorage.removeItem(TOKEN_KEY);
        window.sessionStorage.clear();
        this.reloadPage();
    }

    public saveToken(token: string){
        window.sessionStorage.removeItem(TOKEN_KEY);
        window.sessionStorage.setItem(TOKEN_KEY, token);
    }

    public getToken(): string {
        return sessionStorage.getItem(TOKEN_KEY);
    }

    public saveLogin(login: string){
        window.sessionStorage.removeItem(USERNAME_KEY);
        window.sessionStorage.setItem(USERNAME_KEY, login);
    }

    public getLogin(): string{
        return sessionStorage.getItem(USERNAME_KEY);
    }

    public saveAuthority(authorities: string[]){
        window.sessionStorage.removeItem(AUTHORITIES_KEY);
        window.sessionStorage.setItem(AUTHORITIES_KEY, JSON.stringify(authorities))
    }

    public getAuthority(): string[] {
        this.roles = []
        if (sessionStorage.getItem(TOKEN_KEY)) {
          JSON.parse(sessionStorage.getItem(AUTHORITIES_KEY)!).forEach(authority => {
            this.roles.push(authority.authority);
          });
        }
        return this.roles;
    }
    
    public isUserSignedIn() : boolean {
        if(this.getToken()){
            return true;
        }
        return false;
    }

    reloadPage(): void{
        window.location.reload();
    }
}

拦截器class代码如下：

import { Injectable } from '@angular/core';
import {HttpInterceptor, HttpRequest, HttpHandler, HttpSentEvent, HttpHeaderResponse, HttpProgressEvent,
  HttpResponse, HttpUserEvent, HttpErrorResponse} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Router } from '@angular/router';
import {TokenStorage} from './token.storage';
import {tap} from "rxjs/operators";

const TOKEN_HEADER_KEY = 'Authorization';

@Injectable()
export class Interceptor implements HttpInterceptor {

  constructor(private token: TokenStorage, private router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler):
    Observable<HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse<any> | HttpUserEvent<any>> {
    let authReq = req;
    if (this.token.getToken() != null) {
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + this.token.getToken())});
    }

     return next.handle(authReq).pipe( tap(() => {},
     (err: any) => {
     if (err instanceof HttpErrorResponse) {
       if (err.status !== 401) {
        return;
       }
     }
   }));

  }

}

这里是 auth.service 代码：

import { Observable, throwError } from 'rxjs';
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { catchError } from 'rxjs/operators';

@Injectable()
export class AuthService {

 private watkrewUrl = "http://localhost:8080/";

  constructor(private _http: HttpClient) { 
  }

  login(login: string, password: string): Observable<any> {
    const credentials = {login: login, password: password};
    return this._http.post<any>(this.watkrewUrl + "signin", credentials).pipe(
      catchError((err: HttpErrorResponse) => {
        return throwError(err.error.message);
        console.log(err.message)
      }
      ))
  }

  register(login: string, password: string, email: string, name: string, surname: string, role: string): Observable<any>{
    const signupForm = {login: login, password: password, email:email, name:name, surname: surname, role: role}
    return this._http.post<any>(this.watkrewUrl + "signup", signupForm).pipe(
      catchError((err: HttpErrorResponse)=> {
        return throwError(err.error.message);
      })
    )
  }
}

有人知道如何解决这个问题吗？

Answer 1

SessionStorage.getKey returns string | null.
但是，根据您的签名，您的 TokenStorage.getToken 方法 returns string。

如果您确定会话存储始终包含此密钥，则可以在不更改 TokenStorage.getToken 签名的情况下执行以下操作之一。 a) 将 string | null 转换为 string 就像 sessionStorage.getItem(TOKEN_KEY) as string
b) 检查 null 并在值为 null

时抛出错误

    public getToken(): string {
        const value = sessionStorage.getItem(TOKEN_KEY);
        if (!value) {
            throw Error('Type a message here');
        }
        return value;
    }

否则，您必须将 TokenStorage.getToken return 类型更改为 string | null。

Web 应用程序项目 Angular 13 中的授权问题

Problem with authorization in Angular 13 in web-app project

authorization

jwt

bearer-token

angular