Angular8路由守卫原理和使用方法
192 浏览量
2020-10-16
12:11:36
上传
评论
收藏 86KB PDF 举报
Angular8路由守卫原理和使用方法路由守卫原理和使用方法
主要给大家介绍了关于Angular8路由守卫原理和使用方法的相关资料，文中通过示例代码介绍的非常详细，对
大家学习或者使用Angular8具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
路由守卫路由守卫
守卫，顾名思义，必须满足一定的条件得到许可方可通行，否则拒绝访问或者重定向。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: [AuthGuard],
评论0
最新资源