您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章为大家展示了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],
canActivateChild: [
AuthGuard
],
canDeactivate: [AuthGuard],
loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
},
{
path: 'error',
component: ErrorComponent,
data: {
title: '参数错误或者地址不存在'
}
},
{
path: '**',
redirectTo: 'error',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }使用场景分析
1.canLoad
默认值为true，表明路由是否可以被加载，一般不会认为控制这个守卫逻辑，99.99%情况下，默认所有app模块下路由均允许canLoad
2.canActivate
是否允许进入该路由，此场景多为权限限制的情况下，比如客户未登录的情况下查询某些资料页面，在此方法中去判断客户是否登陆，如未登录则强制导航到登陆页或者提示无权限，即将返回等信息提示。
3.canActivateChild
是否可以导航子路由，同一个路由不会同时设置canActivate为true，canActivateChild为false的情况，此外，这个使用场景很苛刻，尤其是懒加载路由模式下，暂时未使用到设置为false的场景。
4.CanDeactivate
路由离开的时候进行触发的守卫，使用场景比较经典，通常是某些页面比如表单页面填写的内容需要保存，客户突然跳转其它页面或者浏览器点击后退等改变地址的操作，可以在守卫中增加弹窗提示用户正在试图离开当前页面，数据还未保存 等提示。
场景模拟
登录判断
前期准备：login组件；配置login路由
因为login是独立一个页面，所以app.component.html应该只会剩余一个路由导航
<!-- NG-ZORRO --> <router-outlet></router-outlet>
取而代之的是pages.component.html页面中要加入header和footer部分变为如下：
<app-header></app-header> <div nz-row class="main"> <div nz-col nzSpan="24"> <router-outlet></router-outlet> </div> </div> <app-footer></app-footer>
app-routing.module.ts 中路由配置2种模式分析：
// 非懒加载模式
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ErrorComponent } from './error/error.component';
import { AuthGuard } from './core/auth-guard';
import { LoginComponent } from './component/login/login.component';
import { PagesComponent } from './pages/pages.component';
import { IndexComponent } from './component/index/index.component';
const routes: Routes = [
// 一般情况很少需要同时写多个守卫，如果有也是分开几个文件（针对复杂场景，否则一般使用canActivated足够）
{
path: '',
canLoad: [AuthGuard],
canActivate: [AuthGuard],
canActivateChild: [
AuthGuard
],
canDeactivate: [AuthGuard],
component: PagesComponent,
children: [
{
path: 'index',
component: IndexComponent
}
// ...
]
// loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
},
{
path: 'login',
component: LoginComponent,
data: {
title: '登录'
}
},
{
path: 'error',
component: ErrorComponent,
data: {
title: '参数错误或者地址不存在'
}
},
{
path: '**',
redirectTo: 'error',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }非懒加载模式下，想要pages组件能够正常显示切换的路由和固定头部足部，路由只能像上述这样配置，也就是所有组件都在app模块中声明，显然不是很推荐这种模式，切换回懒加载模式：
{
path: '',
canLoad: [AuthGuard],
canActivate: [AuthGuard],
canActivateChild: [
AuthGuard
],
canDeactivate: [AuthGuard],
loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
},pages-routing.module.ts
初始模板：
const routes: Routes = [
{
path: '',
redirectTo: 'index',
pathMatch: 'full'
},
{
path: 'index',
component: IndexComponent,
data: {
title: '公司主页'
}
},
{
path: 'about',
component: AboutComponent,
data: {
title: '关于我们'
}
},
{
path: 'contact',
component: ContactComponent,
data: {
title: '联系我们'
}
},
{
path: 'news',
canDeactivate: [AuthGuard],
loadChildren: () => import('../component/news/news.module').then(m => m.NewsModule)
},
]浏览器截图：
明明我们的html写了头部和底部组件却没显示？
路由的本质：根据配置的path路径去加载组件或者模块，此处我们是懒加载了路由，根据路由模块再去加载不同组件，唯独缺少了加载了pages组件，其实理解整个并不难，index.html中有个<app-root></app-root>,这就表明app组件被直接插入了dom中，反观pages组件，根本不存在直接插进dom的情况，所以这个组件根本没被加载，验证我们的猜想很简单：
export class PagesComponent implements OnInit {
constructor() { }
ngOnInit() {
alert();
}
}经过刷新页面，alert()窗口并没有出现~，可想而知，直接通过路由模块去加载了对应组件；其实我们想要的效果就是之前改造前的app.component.html效果，所以路由配置要参照更改：
const routes: Routes = [
{
path: '',
component: PagesComponent,
children: [
{
path: '',
redirectTo: 'index',
pathMatch: 'full'
},
{
path: 'index',
component: IndexComponent,
data: {
title: '公司主页'
}
},
{
path: 'about',
component: AboutComponent,
data: {
title: '关于我们'
}
},
{
path: 'contact',
component: ContactComponent,
data: {
title: '联系我们'
}
},
{
path: 'news',
canDeactivate: [AuthGuard],
loadChildren: () => import('../component/news/news.module').then(m => m.NewsModule)
},
]
}
];
这样写，pages组件就被加载了，重回正题，差点回不来，我们在登录组件中写了简单的登录逻辑：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
constructor(
private fb: FormBuilder,
private router: Router
) { }
ngOnInit() {
this.loginForm = this.fb.group({
loginName: ['', [Validators.required]],
password: ['', [Validators.required]]
});
console.log(this.loginForm);
}
loginSubmit(event, value) {
if (this.loginForm.valid) {
window.localStorage.setItem('loginfo', JSON.stringify(this.loginForm.value));
this.router.navigateByUrl('index');
}
}
}守卫中：
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
// 权限控制逻辑如 是否登录/拥有访问权限
console.log('canActivate', route);
const isLogin = window.localStorage.getItem('loginfo') ? true : false;
if (!isLogin) {
console.log('login');
this.router.navigateByUrl('login');
}
return true;
}
路由离开（选定应用的组件是contact组件）：
canDeactivate(
component: ContactComponent,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
console.log('canDeactivate');
return component.pageLeave();
}{
path: 'contact',
canDeactivate: [AuthGuard],
component: ContactComponent,
data: {
title: '联系我们'
}
}pageLeave(): Observable<boolean> {
return new Observable(ob => {
if (!this.isSaven) {
this.modal.warning({
nzTitle: '正在离开，是否需要保存改动的数据？',
nzOnOk: () => {
// 保存数据
ob.next(false);
alert('is saving');
this.isSaven = true;
},
nzCancelText: '取消',
nzOnCancel: () => {
ob.next(true);
}
});
} else {
ob.next(true);
}
});
}上述内容就是Angular8路由守卫的原理是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。