Angular应用存在token时如何在启动/刷新时跳转到home组件跳过登录

你当前的问题核心是两点：

• 根路径默认重定向到登录页，没有登录状态判断
• 登录页无访问权限控制，已登录用户仍可访问登录路由

调整步骤如下：

1. 新增未登录访问守卫（UnauthGuard） #

用于控制登录、注册等仅未登录用户可访问的页面，已登录用户访问时直接跳转至首页

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service'; // 替换为你实际的服务路径

@Injectable({
  providedIn: 'root'
})
export class UnauthGuard implements CanActivate {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}

  canActivate(): boolean {
    if (this.auth.isLoggedIn()) {
      // 已登录直接跳首页
      this.router.navigate(['/home']);
      return false;
    }
    return true;
  }
}

2. 修改路由配置 #

给登录页增加UnauthGuard控制即可满足核心需求，也可以额外优化根路径跳转逻辑避免中转闪烁：

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: "full" },
  { 
    path: 'home', 
    component: HomeComponent, 
    canActivate: [AuthGuard]
  },
  { 
    path: 'login', 
    component: LoginComponent,
    // 给登录页加未登录守卫
    canActivate: [UnauthGuard] 
  },
  { path: '**', redirectTo: '/login' }
];

如果想要优化根路径跳转体验，避免先跳登录页再跳首页的闪烁，可以新增根路径守卫：

// 新增RootGuard代码
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class RootGuard implements CanActivate {
  constructor(
    private auth: AuthService,
    private router: Router
  ) {}

  canActivate(): boolean {
    this.auth.isLoggedIn() ? this.router.navigate(['/home']) : this.router.navigate(['/login']);
    return false;
  }
}

把根路径配置替换为以下内容即可：

{ path: '', canActivate: [RootGuard], pathMatch: "full" }

可选优化项 #

• 你当前存储token时用了JSON.stringify，后续请求需要携带token时，要记得用JSON.parse(localStorage.getItem('access_token'))取值，否则会拿到带双引号的异常token
• 可以在isLoggedIn()方法中增加token过期判断，读取存储的expires_in和当前时间对比，过期则清空本地存储返回未登录状态，避免无效token继续使用

内容的提问来源于stack exchange，提问作者Optimist Rohit