在Angular中使用守卫来验证JSON Web Tokens (JWT)的解决方法如下:
首先,安装 jsonwebtoken
和 @angular/jwt
依赖:
npm install jsonwebtoken @angular/jwt
然后,创建一个 jwt.service.ts
文件来处理JWT的操作:
import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';
import { JwtHelperService } from '@auth0/angular-jwt';
@Injectable({
providedIn: 'root'
})
export class JwtService {
constructor(public jwtHelper: JwtHelperService) {}
getToken(): string {
return localStorage.getItem('access_token');
}
saveToken(token: string): void {
localStorage.setItem('access_token', token);
}
destroyToken(): void {
localStorage.removeItem('access_token');
}
isTokenExpired(token?: string): boolean {
if (!token) {
token = this.getToken();
}
if (!token) {
return true;
}
const date = this.jwtHelper.getTokenExpirationDate(token);
if (!date) {
return false;
}
return !(date.valueOf() > new Date().valueOf());
}
getDecodedToken(): any {
const token = this.getToken();
if (token) {
return jwt_decode(token);
}
return null;
}
}
在上面的代码中,getToken
方法从本地存储中获取JWT,saveToken
方法将JWT保存到本地存储中,destroyToken
方法从本地存储中删除JWT,isTokenExpired
方法检查JWT是否过期,getDecodedToken
方法解码并返回JWT的内容。
接下来,创建一个 auth.guard.ts
文件来实现守卫逻辑:
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { JwtService } from './jwt.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private jwtService: JwtService, private router: Router) {}
canActivate(): boolean {
const token = this.jwtService.getToken();
if (token && !this.jwtService.isTokenExpired(token)) {
return true;
}
this.router.navigate(['/login']);
return false;
}
}
在上面的代码中,canActivate
方法检查JWT是否存在且未过期。如果是,则允许导航继续,否则将用户重定向到登录页面。
最后,在你的路由配置中使用守卫:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';
import { HomeComponent } from './home.component';
const routes: Routes = [
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
在上面的代码中,canActivate: [AuthGuard]
将 AuthGuard
应用于需要验证的路由。如果用户未登录或JWT已过期,则导航将被阻止。
希望以上解决方法对你有帮助!