Angular项目中浏览器刷新后重定向至登录页的实现方法

针对你的Angular 12项目需求，可通过以下两种方式实现浏览器刷新时自动从home页重定向到login页：

方法一：利用路由守卫（推荐） #

路由守卫会在路由激活前触发，包括浏览器刷新后的路由初始化，适合精准控制页面访问：

1. 创建路由守卫
   执行CLI命令生成守卫文件：

ng generate guard guards/prevent-reload

2. 编写守卫逻辑
   修改生成的prevent-reload.guard.ts，通过performance API判断是否为刷新操作：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class PreventReloadGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(): boolean {
    // 获取导航类型，判断是否为刷新
    const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    if (navEntry.type === 'reload') {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

3. 配置路由
   在路由配置文件（如app-routing.module.ts）中，给home路由添加该守卫：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { PreventReloadGuard } from './guards/prevent-reload.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { 
    path: 'home', 
    component: HomeComponent,
    canActivate: [PreventReloadGuard] // 添加守卫
  },
  { path: '', redirectTo: '/login', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

方法二：在首页组件监听刷新事件 #

直接在home组件的初始化钩子中判断刷新状态并跳转：

修改home.component.ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit(): void {
    const navEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
    // 检测到刷新操作则跳转登录页
    if (navEntry.type === 'reload') {
      this.router.navigate(['/login']);
    }
  }
}

注意事项 #

• PerformanceNavigationTiming API在主流浏览器中均支持，适配你的Angular 12版本无问题；
• 如果需要结合登录状态判断（比如仅当登录态丢失时才跳转），可在守卫或组件中额外添加token校验逻辑。

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