Angular带ID和Token的密码重置路由跳转至登录页问题

问题现象 #

项目可通过接口发送包含密码重置链接的邮件，链接示例：http://127.0.0.1:4200/auth/password-reset/Mg/bkub0k-13a5906257014a89210c1bc3be8ae924/。点击该链接时，未打开预期的ResetPasswordComponent页面，反而跳转到登录页。测试不带参数的路由{ path: 'auth/password-reset', component: ResetPasswordComponent }可正常访问，但带:id和:token参数的路由无法正常跳转。

原因分析 #

1. Hash路由格式不匹配：项目配置了HashLocationStrategy，但生成的密码重置链接未包含#，导致Angular无法正确识别路由路径，最终触发通配符路由**重定向到登录页。
2. 路由守卫潜在拦截风险：虽然当前带参数的密码重置路由未配置AuthGuard，但如果后续守卫逻辑调整，可能出现误拦截情况。

解决方案 #

1. 修正密码重置链接格式 #

由于项目使用HashLocationStrategy，所有路由链接必须包含#，正确的链接格式应为：

http://127.0.0.1:4200/#/auth/password-reset/Mg/bkub0k-13a5906257014a89210c1bc3be8ae924/

修改后端生成邮件链接的逻辑，在路由路径前添加/#。

2. 优化路由守卫逻辑（可选，预防后续问题） #

在AuthGuard中明确允许未登录用户访问密码重置路由，避免后续逻辑调整导致的拦截：

// auth.guard.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    const isLoggedIn = this.service.IsLoggedIn();
    
    // 放行密码重置路由
    if (state.url.includes('/auth/password-reset')) {
        return true;
    }

    if (isLoggedIn) {
        return true;
    } else {
        this.route.navigate(['/login']);
        return false;
    }
}

3. 统一路由配置（可选，规范项目结构） #

将路由配置从app.module.ts迁移到app-routing.module.ts，保持结构清晰：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { TradingComponent } from './components/trading/trading.component';
import { ProfileComponent } from './components/profile/profile.component';
import { LoginComponent } from './components/login/login.component';
import { RegistrationComponent } from './components/registration/registration.component';
import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
import { AuthGuard } from './shared/auth.guard';

const routes: Routes = [
    { path: '', component: DashboardComponent, canActivate: [AuthGuard] },
    { path: 'trading', component: TradingComponent, canActivate: [AuthGuard] },
    { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegistrationComponent },
    { path: 'auth/password-reset/:id/:token', component: ResetPasswordComponent },
    { path: '**', redirectTo: 'login' },
];

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

然后在app.module.ts中移除RouterModule.forRoot(appRoutes)的导入，仅保留AppRoutingModule。

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