茫茫人海中与你相遇
![0a1f3ecd0ca7c01a4b1b79081a172590.png](https://i-blog.csdnimg.cn/blog_migrate/ea2729640bd4be866fdef5bb87914d4f.png)
相信未来的你不会很差
作者:何弃疗
来源:https://segmentfault.com/a/1190000020144286
路由守卫
守卫,顾名思义,必须满足一定的条件得到许可方可通行,否则拒绝访问或者重定向。Angular中路由守卫可以借此处理一些权限问题,通常应用中存储了用户登录和用户权限信息,遇到路由导航时会进行验证是否可以跳转。4种守卫类型
按照触发顺序依次为:canload(加载)、canActivate(进入)、canActivateChild(进入子路由)和canDeactivate(离开)。
一个所有守卫都是通过的守卫类:
import { Injectable } from '@angular/core';import {
CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild, CanLoad, CanDeactivate} from '@angular/router';import { Route } from '@angular/compiler/src/core';import { NewsComponent } from '../component/news/news.component';@Injectable({ providedIn: 'root' })export class AuthGuard implements CanActivate, CanActivateChild, CanLoad, CanDeactivate<any> {
constructor( private router: Router) {
} canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
// 权限控制逻辑如 是否登录/拥有访问权限 console.log('canActivate'); return true; } canDeactivate( component: NewsComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) {
console.log('canDeactivate'); return true; } canActivateChild() {
// 返回false则导航将失败/取消 // 也可以写入具体的业务逻辑 console.log('canActivateChild'); return true; } canLoad(route: Route) {
// 是否可以加载路由 console.log('canload'); return true; }}
app-routing.module.ts
import { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { ErrorComponent } from './error/error.component';import { AuthGuard } from './core/auth-guard';const routes: Routes = [ // 一般情况很少需要同时写多个守卫,如果有也是分开几个文件(针对复杂场景,否则一般使用canActivated足够) {
path: '', canLoad: [AuthGuard], canActivate: [AuthGuar