我正在尝试将一个项目从Angular迁移到ReactJs。我很难在登录/退出时使用相同的方法进行认证,即使用jwt令牌。
这是Auth.Gard文件的Angular代码。
getToken()函数是对与用户有关的后台的一个api调用:
export class AuthGuard implements CanActivate {
constructor(private authService: AuthorizationService, private router: Router, private loadingSevice: LoadingService) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (this.authService.isLoggedIn()) {
const data = JSON.parse(localStorage.getItem('data'));
console.log(data);
if (data) {
const idToken = data.access_token;
if (!jwtHelper.isTokenExpired(idToken,10)) {
return true;
}
else {
this.loadingSevice.getToken().then((res: any) => {
console.log(res);
data.access_token = res.access_token;
console.log(data);
localStorage.setItem('data', JSON.stringify(data));
}).catch(er => {
console.log(er);
localStorage.clear();
this.router.navigateByUrl('/login');
});
}
return true;
}
}
return this.router.parseUrl('/login');
}
}
在react项目中,我创建了一个私有路由来检查用户是否登录:
function PrivateRoute({ children }) {
const data = localStorage.getItem('data');
if (!data) {
// not logged in so redirect to login page with the return url
return <Navigate to="/login" />
}
// authorized so return child components
return children;
}
我找不到类似于angular中jwtHelper的方法,如果你有任何好的文章或建议来处理这个问题,谢谢。