如何将Jwt认证方法从Angular转换到react上(附代码)

139 阅读1分钟

我正在尝试将一个项目从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的方法,如果你有任何好的文章或建议来处理这个问题,谢谢。