Angular 6实现登录后跳转至邮件审批链接指定页面的方法

嘿，这个需求在企业级应用里太常见了，我来一步步帮你搞定它：

1. 配置路由，支持返回URL参数 #

首先咱们得给登录路由加上接收returnUrl参数的能力，修改你的app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ApprovalComponent } from './approval/approval.component';
import { AuthGuard } from './auth/auth.guard';

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: 'approval/:requestId', component: ApprovalComponent, canActivate: [AuthGuard] },
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  // 其他路由...
];

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

这里的ApprovalComponent就是你的审批页面路由，我们给它加上了AuthGuard守卫，用来拦截未认证的访问。

2. 实现认证守卫（AuthGuard），拦截未认证请求并传递returnUrl #

接下来在AuthGuard里，当用户未认证时，我们要把当前试图访问的URL作为returnUrl参数跳转到登录页：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.authService.isAuthenticated()) {
      // 用户已认证，允许访问
      return true;
    }

    // 用户未认证，保存当前URL到returnUrl参数，跳转到登录页
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
    return false;
  }
}

这里的AuthService是你自己的认证服务，isAuthenticated()方法用来判断用户是否已登录。state.url就是用户试图访问的审批页面完整路径（比如/approval/123）。

3. 登录组件处理登录成功后的跳转 #

在登录组件里，登录成功后我们要读取returnUrl参数，然后跳转到对应页面，如果没有这个参数就跳转到默认页面（比如首页）：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth/auth.service';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  returnUrl: string;

  constructor(
    private authService: AuthService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit() {
    // 从路由参数中获取returnUrl，没有的话默认跳转到首页
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }

  login(username: string, password: string) {
    this.authService.login(username, password).subscribe(
      () => {
        // 登录成功，跳转到returnUrl指定的页面
        this.router.navigate([this.returnUrl]);
      },
      error => {
        // 处理登录错误
        console.error('登录失败:', error);
      }
    );
  }
}

4. 邮件链接的正确生成 #

最后，你发送邮件里的审批链接应该指向你的Angular应用的审批页面路由，比如：

https://your-app-domain.com/approval/12345

当用户点击这个链接时，如果未登录，AuthGuard会自动拦截并跳转到https://your-app-domain.com/login?returnUrl=%2Fapproval%2F12345，登录成功后就会自动跳转到/approval/12345页面了。

额外注意点 #

• 确保你的AuthService里的登录逻辑是正确的，登录成功后要标记用户为已认证（比如保存token到localStorage）。
• 如果returnUrl是外部链接，你可能需要加一层校验，防止跳转到恶意网站，比如只允许跳转到本应用内的路由。

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