Angular手动导航/刷新子路由301跳转回login页如何修复

刷新/create-account页面触发301重定向到login，由两个配置缺失导致：

• 路由表未配置默认跳转规则、无效路径兜底规则
• Angular默认使用HTML5路径路由模式，该模式下刷新子路由、直接在地址栏输入子路由地址时，请求会直接发送给服务端，服务端未配置路径重写规则时，找不到对应资源就会触发301重定向。

1. 补全基础路由配置 #

修改app-routing.module.ts中的路由数组，补充空路径重定向、通配符兜底规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CreateAccountComponent } from './create-account/create-account.component';
import { LoginComponent } from './login/login.component';
import { PasswordResetComponent } from './password-reset/password-reset.component';

const routes: Routes = [
  // 根路径默认跳转login，pathMatch必须设为full完全匹配空路径，否则会出现路由匹配死循环
  { path: "", redirectTo: "login", pathMatch: "full" },
  { path: "login", component: LoginComponent },
  { path: "create-account", component: CreateAccountComponent },
  { path: "password-reset", component: PasswordResetComponent },
  // 通配符路由，所有匹配不到的路径统一跳转login，避免出现白屏
  { path: "**", redirectTo: "login" }
];

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

2. 解决服务端重定向问题 #

根据使用场景二选一即可：

方案一：零服务端配置快速修复 #

直接启用Hash路由模式，修改RouterModule.forRoot的传参即可。该模式下路由地址会自动拼接#标识，#后的路径内容不会发送到服务端，从根源避免服务端301问题：

// 修改NgModule中的路由引入配置
imports: [RouterModule.forRoot(routes, { useHash: true })],

该方案改造成本极低，适合本地调试、内部系统快速上线场景，缺点是地址栏会带#字符，不符合常规URL审美。

方案二：保留原生HTML5路由（生产环境推荐） #

如果想要干净的URL地址，就给对应服务端添加路径重写规则，把所有非静态资源的请求都重定向返回index.html，交给Angular前端路由接管页面渲染：

• 本地使用ng serve调试：Angular 14及以上版本默认自带该重写规则，升级版本后无需额外配置
• Nginx部署：在站点对应的server配置块中添加try_files $uri $uri/ /index.html;
• Apache部署：在站点根目录新建/修改.htaccess文件，添加重写规则将所有请求转发到index.html
• 自研Node/Java服务端：添加全局拦截逻辑，不存在的路径直接返回项目打包后的index.html文件内容

配置修改完成后重启服务，直接在地址栏输入http://localhost/create-account、在该页面按F5刷新，都不会再触发301跳回login，页面可以正常渲染。

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