Angular 5中canActivate返回false时如何重定向至其他组件？

嘿，这个权限控制需求太常见了，我来给你一步步说明怎么实现：

首先，你需要在MainService里注入Router，然后在canActivate方法里判断用户登录状态——如果已经登录，就触发重定向，同时阻止访问登录页面。

方法一：使用Router.navigate直接导航 #

这种方式简单直接，适合快速落地：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
// 替换成你实际用于判断登录状态的服务
import { AuthService } from './auth.service';

@Injectable()
export class MainService implements CanActivate {
  // 注入路由服务和登录状态服务
  constructor(private router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    // 检查用户是否已登录
    if (this.authService.isLoggedIn()) {
      // 重定向到你指定的页面，比如首页'/home'
      this.router.navigate(['/home']);
      // 返回false，直接阻止访问登录页
      return false;
    }
    // 未登录状态下允许访问登录页
    return true;
  }
}

方法二：返回UrlTree（更推荐的标准实现） #

Angular 4.3+（包含Angular 5）支持返回UrlTree作为路由守卫的返回值，这种方式是同步操作，Angular会自动处理重定向，比navigate更贴合路由守卫的设计规范：

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

@Injectable()
export class MainService implements CanActivate {
  constructor(private router: Router, private authService: AuthService) {}

  // 修改返回值类型为boolean | UrlTree
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      // 返回UrlTree，Angular会自动跳转到该路径
      return this.router.createUrlTree(['/home']);
    }
    return true;
  }
}

关键注意事项 #

• 确保你的AuthService里的isLoggedIn方法能准确判断用户状态，比如检查localStorage中的登录令牌、会话存储里的用户信息等。
• 把代码中的'/home'替换成你实际想要重定向的目标路径（比如控制台、个人中心等）。

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