Angular Auth Guard问题：如何实现未登录仅访登录页、登录后仅访其他页？

算力阿峰

2026-7-1

Angular AuthGuard 权限控制问题排查与修复

当前 AuthGuard 代码

export const AuthGuard: CanActivateFn = (
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot,
      ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree => {
        const router = inject(Router);
        if (localStorage.getItem('userdata')) {
          return true;
        } else {
          return router.navigate(['login']);
          /** no need to return 'false', just return the promise */
        }
      };

核心问题

你的AuthGuard只处理了未登录用户访问受保护页面的场景，完全没对已登录用户访问登录页做限制。当已登录用户直接输入登录页地址时，Guard会因为localStorage.getItem('userdata')存在而返回true，允许用户进入登录页，这就违背了你的预期逻辑。

修复方案

需要在Guard中新增对目标路由的判断，覆盖两种核心场景：

未登录用户：仅允许访问登录页，其他页面强制跳转至登录页
已登录用户：禁止访问登录页，直接跳转至仪表盘等默认页面

修正后的代码：

export const AuthGuard: CanActivateFn = (
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot,
      ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree => {
        const router = inject(Router);
        const hasUser = !!localStorage.getItem('userdata');
        const isLoginPage = state.url === '/login';

        if (hasUser) {
          // 已登录用户：禁止访问登录页，其他页面正常放行
          return isLoginPage ? router.navigate(['dashboard']) : true;
        } else {
          // 未登录用户：仅允许访问登录页，其他页面跳转登录
          return isLoginPage ? true : router.navigate(['login']);
        }
      };