路由守卫重定向页面

创建 AuthGuard

在 AuthGuard 中，检查用户的登录状态。如果未登录，则保存当前路径，然后导航到登录页面。

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

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

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const isLoggedIn = /* 判断用户是否登录的逻辑 */;
    if (isLoggedIn) {
      return true;
    } else {
      // 如果未登录，保存目标路径，并跳转到登录页面
      localStorage.setItem('redirectUrl', state.url); // 或者使用 sessionStorage
      this.router.navigate(['/login']);
      return false;
    }
  }
}

登录页面登录逻辑
在用户成功登录后，检查是否存在保存的目标路径，存在则跳转到目标路径，不存在则跳转到首页。
下面展示一些 内联代码片。

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})
export class LoginComponent {
  constructor(private router: Router) {}

  onLoginSuccess() {
    // 执行登录逻辑，例如请求登录API

    // 登录成功后，检查并重定向到目标路径
    const redirectUrl = localStorage.getItem('redirectUrl');
    if (redirectUrl) {
      this.router.navigate([redirectUrl]);
      localStorage.removeItem('redirectUrl'); // 清除保存的路径
    } else {
      this.router.navigate(['/home']); // 默认跳转到首页
    }
  }
}

在路由模块中配置守卫

在路由配置文件中添加 AuthGuard 到需要保护的路由。


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent },
  // 其他路由配置
];

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

解释
当用户尝试访问受保护的页面但未登录时，AuthGuard 会将当前路径信息存储到 localStorage（或 sessionStorage）。
用户成功登录后，登录组件会检查是否存在重定向路径，存在则跳转，否则进入默认首页。

路由守卫重定向页面

悦读