用户身份验证时路由无法正常工作

问题描述

所以，我在一个有路由的项目中遇到了问题。我按照以下步骤操作。

1. 登录系统时，我将令牌和用户名保存在本地存储中。
2. 登录成功，打开仪表盘页面。
3. 我关闭浏览器并再次打开项目。登录页面中的页面路由，仪表板页面中没有，只有当我放置正确的 url 页面路由时才可以。所以数据在本地存储。 在这部分中，我想在仪表板页面中路由页面，而不是在登录中，只有当我在本地存储中有数据用户时。如果本地存储为空，我想在登录页面中路由

我有这个路由：

const routes: Routes = [
  { path: 'login',component: LoginComponent },{ path: 'forgotpassword',component: ForgotPasswordComponent },{ path: '',{ path: 'panel',canActivate: [AuthGuard],loadChildren: () => import('./panel/panel.module').then(m => m.PanelModule) }
];

还有这个路由面板。

const routes: Routes = [
  {
    path: '',component: PanelComponent,canActivateChild: [AuthGuard],children: [
      {
        path: '',pathMatch: 'full',redirectTo: 'dashboard'
      },{
        path: 'dashboard',component: DashboardComponent,data: { allowedRoles: [Role.COMmunitY_ADMIN] }
      },.....
      {
        path: 'documents',component: DocumentComponent,data: { allowedRoles: [Role.CHAIRMAN] }
      },]
  }
];

我有这个 Authguard。

canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      if (this.authService.currentUserLogged){
      return true;
    }
    this.router.navigateByUrl('/');
    return false;
  }

  canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.currentUserLogged) {
      const userRoles = currentUserLogged.user?.user_roles;
      const allowedRoles = route.data.allowedRoles;
      return this.authService.isAuthorized(allowedRoles,userRoles);
    }
    this.router.navigateByUrl('/');
    return false;
  }

更新

authservice.ts

currentUserLogged!: IUserLoggedInAccountDTO;

     constructor(protected httpClient: HttpClient,private router: Router) {
        this.currentUserLogged = this.getUserLoggedInAccount();
      }
    
      private getUserLoggedInAccount = (): IUserLoggedInAccountDTO => (JSON.parse(localStorage.getItem(environment.userLoggedInAccountLocalStorageKey) || '{}'));
    
      isAuthorized(allowedRoles: any,userRoles: any): boolean {
        if (allowedRoles === null || allowedRoles?.length === 0) {
          return true;
        }
        if (userRoles !== null && userRoles?.length !== 0) {
          const userRolesFiltered = userRoles.filter((userRole: any) => formatDate(userRole.end_date,'yyyy-MM-dd','en_US') >= formatDate(new Date(),'en_US'));
          const authorise: boolean = userRolesFiltered.some((userRole: any) => allowedRoles.includes(userRole.role.name));
          if (!authorise) {
            this.router.navigate(['/']);
            return false;
          }
          return true;
        }
        return false;
      }

非常感谢您的回答！

解决方法

访问根页面时，您必须重定向到仪表板页面。

const routes: Routes = [
  { path: 'login',component: LoginComponent },{ path: 'forgotpassword',component: ForgotPasswordComponent },{ path: '',redirectTo: '/panel/dashboard',pathMatch: 'full' },{ path: 'panel',canActivate: [AuthGuard],loadChildren: () => import('./panel/panel.module').then(m => m.PanelModule) }
];

并且您必须在未登录时导航到登录页面。

canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.currentUserLogged.user){
      return true;
    }
    this.router.navigateByUrl('/login');
    return false;
  }

  canActivateChild(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.currentUserLogged.user) {
      const userRoles = currentUserLogged.user.user_roles;
      const allowedRoles = route.data.allowedRoles;
      return this.authService.isAuthorized(allowedRoles,userRoles);
    }
    this.router.navigateByUrl('/login');
    return false;
  }

更新

您应该在 /login 中返回 false 之前导航到 authservice.ts

        if (userRoles !== null && userRoles?.length !== 0) {
          const userRolesFiltered = userRoles.filter((userRole: any) => formatDate(userRole.end_date,'yyyy-MM-dd','en_US') >= formatDate(new Date(),'en_US'));
          const authorise: boolean = userRolesFiltered.some((userRole: any) => allowedRoles.includes(userRole.role.name));
          if (!authorise) {
            this.router.navigate(['/login']);
            return false;
          }
          return true;
        }
        this.router.navigate(['/login']);
        return false;