一、啥是页面访问权限控制
在咱开发网页应用的时候，经常会遇到这样的情况：有些页面不是谁都能随便访问的。比如说，用户得先登录才能看自己的个人信息页面；或者某些管理页面，只有管理员才能进去。这就是页面访问权限控制，简单来说，就是规定谁能访问哪些页面，谁不能访问。
举个例子，一个电商网站，普通用户可以浏览商品、下单，但后台的订单管理页面，只有管理员才能进去操作。要是不做权限控制，那谁都能进去改订单信息，这不乱套了嘛。
二、Angular路由守卫是啥
Angular是个很强大的前端框架，它里面有个东西叫路由守卫。这路由守卫就像是个门卫，守在页面的入口，能决定让不让用户进去。当用户想访问某个页面的时候，路由守卫会先检查一些条件，要是条件满足，就放用户进去；要是不满足，就把用户拦住。
Angular里有好几种路由守卫，常见的有CanActivate、CanActivateChild、CanDeactivate、Resolve和CanLoad。咱们这里主要讲讲CanActivate，它能控制用户能不能访问某个路由。
三、应用场景
1. 用户登录验证
很多网站都有登录功能，用户得先登录才能访问一些特定页面。比如说，用户登录后才能看自己的购物车。这时候就可以用Angular路由守卫来做验证。当用户想访问购物车页面时，路由守卫会检查用户是否已经登录，如果登录了就放行，没登录就跳转到登录页面。
2. 角色权限控制
有些网站有不同的角色，比如普通用户、管理员。不同角色能访问的页面不一样。管理员可以访问后台管理页面，普通用户就不行。这时候也可以用路由守卫来做权限控制。当用户想访问某个页面时，路由守卫会检查用户的角色，只有符合条件的角色才能访问。
3. 数据预加载
有时候，在用户访问某个页面之前，需要先加载一些数据。比如说，在用户访问商品详情页之前，需要先从服务器获取商品的详细信息。这时候可以用Resolve路由守卫来实现数据预加载。当用户访问商品详情页时，路由守卫会先去服务器获取商品信息，等信息获取完成后再把用户导航到商品详情页。
四、Angular路由守卫实战示例（Angular技术栈）
1. 创建路由守卫
首先，咱们得创建一个路由守卫。在Angular里，可以用Angular CLI来创建。打开终端，输入下面的命令：
// 创建一个名为 auth.guard 的路由守卫
ng generate guard auth
这个命令会在项目里生成一个auth.guard.ts文件，内容大概是这样的：
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
// 这里可以写权限验证的逻辑
const isLoggedIn = localStorage.getItem('isLoggedIn');
if (isLoggedIn === 'true') {
return true; // 有权限访问
} else {
// 没有权限访问，跳转到登录页面
this.router.navigate(['/login']);
return false;
}
}
}
在这个代码里，AuthGuard实现了CanActivate接口，canActivate方法就是用来做权限验证的。这里简单地通过检查localStorage里的isLoggedIn来判断用户是否登录。如果登录了就返回true，表示可以访问；没登录就跳转到登录页面并返回false。
2. 配置路由
接下来，要把路由守卫配置到路由里。打开app-routing.module.ts文件，配置如下：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, // 使用路由守卫
{ path: 'login', component: LoginComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在这个配置里，canActivate: [AuthGuard]表示访问profile页面时会触发AuthGuard路由守卫进行权限验证。
3. 模拟登录
为了测试路由守卫，咱们还得模拟一个登录功能。在login.component.ts里添加如下代码：
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
constructor(private router: Router) {}
login() {
// 模拟登录成功
localStorage.setItem('isLoggedIn', 'true');
this.router.navigate(['/profile']);
}
}
在login.component.html里添加一个登录按钮：
<button (click)="login()">登录</button>
这样，当用户点击登录按钮时，会把isLoggedIn存到localStorage里，然后跳转到profile页面。
五、技术优缺点
优点
1. 增强安全性
通过路由守卫，可以有效地控制用户对页面的访问，防止未授权的用户访问敏感页面，提高了应用的安全性。
2. 代码复用性高
路由守卫可以在多个路由中复用，避免了重复的权限验证代码，提高了代码的可维护性。
3. 灵活配置
可以根据不同的需求配置不同的路由守卫，实现多样化的权限控制。
缺点
1. 增加开发复杂度
使用路由守卫需要额外编写代码，增加了开发的复杂度，尤其是对于初学者来说，可能需要花费一些时间来理解和掌握。
2. 性能开销
路由守卫在每次路由跳转时都会执行，可能会带来一定的性能开销，尤其是在复杂的权限验证逻辑下。
六、注意事项
1. 异步操作
如果权限验证需要进行异步操作，比如从服务器获取用户信息，要注意使用Observable或Promise来处理。
2. 错误处理
在路由守卫里要做好错误处理，避免因为权限验证出错导致应用崩溃。
3. 路由配置
要确保路由配置正确，避免出现路由守卫配置错误导致权限控制失效的问题。
七、文章总结
Angular路由守卫是一个非常有用的工具，可以帮助咱们解决页面访问权限控制的问题。通过使用路由守卫，咱们可以灵活地控制用户对页面的访问，提高应用的安全性和可维护性。在实际开发中，要根据具体的需求选择合适的路由守卫，并注意处理好异步操作、错误处理和路由配置等问题。
评论