令牌 jwt 可与 spring boot 一起使用，但 angular 存在错误

Posted 2023-02-27

【中文标题】令牌 jwt 可与 spring boot 一起使用，但 angular 存在错误

【英文标题】：token jwt work with spring boot but with angular there are error

【发布时间】：2020-06-10 19:29:12

【问题描述】：

当我尝试在 Spring Boot 中使用 jwt 时，它可以工作 connecting and setting the token with spring boot it works this is the token

whene i want to work with angular there is a problem at first whene i connect (login) he create the token and he connect correctly login successful [他创建令牌][4]

whene i navigate to another page this is the error 我认为spring boot没有问题，我不知道angular有什么问题

这是我的路线

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';

import  RegisterComponent  from './register/register.component';
import  LoginComponent  from './login/login.component';
import  HomeComponent  from './home/home.component';
import  ProfileComponent  from './profile/profile.component';
import  BoardUserComponent  from './board-user/board-user.component';
import  BoardModeratorComponent  from './board-moderator/board-moderator.component';
import  BoardAdminComponent  from './board-admin/board-admin.component';

const routes: Routes = [
   path: 'home', component: HomeComponent ,
   path: 'login', component: LoginComponent ,
   path: 'register', component: RegisterComponent ,
   path: 'profile', component: ProfileComponent ,
   path: 'user', component: BoardUserComponent ,
   path: 'mod', component: BoardModeratorComponent ,
   path: 'admin', component: BoardAdminComponent ,
   path: '', redirectTo: 'home', pathMatch: 'full' 
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

这是我的身份验证服务

import  Injectable  from '@angular/core';
import  HttpClient, HttpHeaders  from '@angular/common/http';
import  Observable  from 'rxjs';

const AUTH_API = 'http://localhost:8080/api/auth/';

const httpOptions = 
  headers: new HttpHeaders( 'Content-Type': 'application/json' )
;

@Injectable(
  providedIn: 'root'
)
export class AuthService 

  constructor(private http: HttpClient)  

  login(credentials): Observable<any> 
    return this.http.post(AUTH_API + 'signin', 
      username: credentials.username,
      password: credentials.password
    , httpOptions);
  

  register(user): Observable<any> 
    return this.http.post(AUTH_API + 'signup', 
      username: user.username,
      email: user.email,
      password: user.password
    , httpOptions);
  

我的令牌存储服务

import  Injectable  from '@angular/core';

const TOKEN_KEY = 'auth-token';
const USER_KEY = 'auth-user';

@Injectable(
  providedIn: 'root'
)
export class TokenStorageService 

  constructor() 
  

  signOut() 
    window.sessionStorage.clear();
  

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

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

  public saveUser(user) 
    window.sessionStorage.removeItem(USER_KEY);
    window.sessionStorage.setItem(USER_KEY, JSON.stringify(user));
  

  public getUser() 
    return JSON.parse(sessionStorage.getItem(USER_KEY));
  

用户服务

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  Observable  from 'rxjs';

const API_URL = 'http://localhost:8080/api/test/';

@Injectable(
  providedIn: 'root'
)
export class UserService 

  constructor(private http: HttpClient)  

  getPublicContent(): Observable<any> 
    return this.http.get(API_URL + 'all',  responseType: 'text' );
  

  getUserBoard(): Observable<any> 
    return this.http.get(API_URL + 'user',  responseType: 'text' );
  

  getModeratorBoard(): Observable<any> 
    return this.http.get(API_URL + 'mod',  responseType: 'text' );
  

  getAdminBoard(): Observable<any> 
    return this.http.get(API_URL + 'admin',  responseType: 'text' );
  

我的 AuthInterceptor

import  HTTP_INTERCEPTORS  from '@angular/common/http';
import  Injectable  from '@angular/core';
import  HttpInterceptor, HttpHandler, HttpRequest  from '@angular/common/http';
import TokenStorageService from '../auth/token-storage.service';

const TOKEN_HEADER_KEY = 'Authorization';

@Injectable()
export class AuthInterceptor implements HttpInterceptor 
  constructor(private token: TokenStorageService)  

  intercept(req: HttpRequest<any>, next: HttpHandler) 
    let authReq = req;
    const token = this.token.getToken();
    if (token != null) 
      authReq = req.clone( headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) );
    
    return next.handle(authReq);
  


export const authInterceptorProviders = [
   provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true 
];

登录组件

import  Component, OnInit  from '@angular/core';
import AuthService from '../auth/auth.service';
import TokenStorageService from '../auth/token-storage.service';

@Component(
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
)
export class LoginComponent implements OnInit 
  form: any = ;
  isLoggedIn = false;
  isLoginFailed = false;
  errorMessage = '';
  roles: string[] = [];

  constructor(private authService: AuthService, private tokenStorage: TokenStorageService)  

  ngOnInit() 
    if (this.tokenStorage.getToken()) 
      this.isLoggedIn = true;
      this.roles = this.tokenStorage.getUser().roles;
    
  

  onSubmit() 
    this.authService.login(this.form).subscribe(
      data => 
        this.tokenStorage.saveToken(data.accessToken);
        this.tokenStorage.saveUser(data);

        this.isLoginFailed = false;
        this.isLoggedIn = true;
        this.roles = this.tokenStorage.getUser().roles;
        this.reloadPage();
      ,
      err => 
        this.errorMessage = err.error.message;
        this.isLoginFailed = true;
      
    );
  

  reloadPage() 
    window.location.reload();
  

【问题讨论】：

如果您能向我们展示您的 Angular 路由代码和您拥有的任何身份验证服务，将会很有帮助。

我编辑了我的问题，所以请帮助我

【参考方案1】：

能否请您也显示 BoardUserComponent js 代码？我假设您检查用户是否在其中登录并且您在某处输入了类型，所以在这种情况下不要这样做。你应该使用警卫。 像这样制作一个保护文件并检查用户是否已登录，然后您必须返回一个布尔值。

user.guard.ts

import  Injectable  from '@angular/core'
import  CanActivate, Router  from '@angular/router';
import  AuthService  from '@services/auth/auth.service';

@Injectable(
  providedIn: 'root'
)
export class UserGuard implements CanActivate 

  constructor(
    private _AuthService: AuthService,
    private _Router: Router
  ) 

  canActivate() 
    if(this._AuthService.isLoggedIn()) 
      return true;
     else 
      this._Router.navigate(['/auth/login']);
      return false;
    
  

之后你就可以在路由文件里面导入，这样写路径。

  path: 'user',
  canActivate: [UserGuard],
  component: BoardUserComponent
,

【讨论】：

import Component, OnInit from '@angular/core'; import UserService from '../_service/user.service'; @Component( selector: 'app-board-user', templateUrl: './board-user.component.html', styleUrls: ['./board-user.component.css'] ) export class BoardUserComponent implements OnInit content = ''; constructor(private userService: UserService) ngOnInit() this.userService.getUserBoard().subscribe( data => this.content = data; , err => this.content = JSON.parse(err.error).message; );

我没有像方法那样登录

我检查了 UserGuard 的解决方案并重定向了 ['/auth/login]