Angular8路由保护的原理和用法

时间：2021-08-20 来源：互联网编辑：宝哥软件园浏览：次

路由保护

警卫，顾名思义，必须满足一定的条件并获得许可才能通过，否则拒绝进入或重定向。Angular中的路由守卫可以处理一些权限问题。通常，应用程序存储用户登录和用户权限信息，并在遇到路由导航时验证是否可以跳转。

四种类型的警卫

根据触发顺序，它是：可加载、可激活、可激活子和可激活。

所有警卫都通过的警卫班：

从“@angular/core”导入{ injective }；从“@angular/router”导入{ CanActivate，Router，activate Router，ActivatedRouteSnapshot，CanActivateChild，CanLoad，CanDeactivate }；从“@angular/compiler/src/core”导入{ Route }；从导入{新闻组件}./component/news/news.component '；@ injective({ providen : ' root ' })导出类AuthGuard实现CanActivate、CanActivateChild、CanLoad、CanDeactivateany {构造函数(私有Router : Router)} } CanActivate(route : activated droutessnapshot，State : routerstatessnapshot): Boolean {//权限控制逻辑，如是否登录/拥有访问权限console . log(' CanActivate ')；返回真；} candelactivate(component : newcomponent，current outreate : activated droutessnapshot，current state : routerstatessnapshot，next state : routerstatessnapshot){ console . log(' candelactivate ')；返回真；} canActivateChild() {//如果返回false，导航将失败/取消//，或者您可以将其写入特定的业务逻辑控制台. log(' canActivateChild ')；返回真；} canLoad(route: Route) {//可以加载Route console . log(' can load ')；返回真；}}app-routing.module.ts

从“@angular/core”导入{ NgModule }；从“@angular/router”导入{ Routes，RouterModule }；从“”导入{ ErrorComponent }。/error/error.component '；从“”导入{ AuthGuard }。/core/auth-guard '；Const routes: Routes=[//通常，很少需要同时编写多个防护。如果有几个文件(对于复杂场景，一般用canActivated就够了){Path: ' '，CAN LOAD 3360 [authguard]，canActivate: [AuthGuard]，canactivate child 3360[auth guard]，canactivate :[auth guard]，loadChildren: ()=import('。/pages/pages.module ')。然后(m=m.PagesModule) }，{ path: 'error '，component: ErrorComponent，data: {title: '的参数错误或地址不存在' }，{path:' * * '，重定向到： 'error '，path match 3360 ' full ' }]；@ ng module({ imports :[routermodule。对于根(路由)]，导出： [routermodule]})导出类approutingmodule {}使用场景分析

1.canLoad

默认值为真，表示是否可以加载路由。一般不考虑控制这个保护逻辑。在99.99%的情况下，默认允许加载app模块下的所有路由

2 .激活

是否允许访问路由，大多是在权限有限的情况下，比如在客户没有登录的时候查询一些数据页面，判断客户是否登录了这种方法，如果没有，强行导航到登录页面或者提示没有权限，很快就会返回。

3.canActivateChild

无论子路线是否可以导航，同一条路线都不会同时将“激活”设置为“真”和“激活子”设置为“假”。此外，这种使用场景非常苛刻，尤其是在惰性加载路由模式下，设置为false的场景暂时还没有使用。

4.可激活

路线离开时触发的守卫是一个经典的使用场景。通常有些页面，比如表单页面，需要保存，客户突然跳转到其他页面或者浏览器点击返回更改地址。可以在guard中添加弹出窗口，提醒用户正在尝试离开当前页面，数据尚未保存。

场景模拟

登录判断

前期准备：登录组件；配置登录路由

因为登录是一个独立的页面，在app.component.html应该只剩下一个路线导航了

！- NG-ZORRO -路由器-插座/路由器-插座取而代之的是pages.component.html页面中要加入页眉和页脚部分变为如下：

app-header/app-header div NZ-row class=' main ' div NZ-col nzSpan=' 24 '路由器-插座/路由器-插座/div/div PP-footer app-routing。模块。分时（同timesharing）中路由配置2种模式分析：

//非懒加载模式从“@棱角分明/核心”导入{ ng module }；从" @angular/router "导入{路由，路由模块}；从""导入{错误组件} ./错误/错误。组件'；从""导入{ AuthGuard } ./core/auth-guard '；从""导入{登录组件} ./组件/登录/登录。组件'；从""导入{页面组件}。/页数/页数。组件'；从""导入{ IndexComponent } ./组件/索引/索引。组件'；常量路由：路由=[ //一般情况很少需要同时写多个守卫，如果有也是分开几个文件（针对复杂场景，否则一般使用创新的足够){ path: ' '，可以加载： [AuthGuard]，可以激活： [AuthGuard]，可以激活子：[auth guard]，可以激活：[auth guard]，组件：页面组件，children: [ { path: 'index '，component : index component }//.] //loadChildren: ()=import(' ./page/pages . module ').然后(m=m.PagesModule) }，{ path: 'login '，component: LoginComponent，data: { title: '登录} }，{ path: '错误，component: ErrorComponent，data: { title: '参数错误或者地址不存在} }，{ path: '** '，redirectTo: '错误，路径匹配： '已满' }];@ ng模块({ import s :[RouterModule。forroot(routes)]，exports: [RouterModule]})导出类AppRoutingModule { }非懒加载模式下，想要页组件能够正常显示切换的路由和固定头部足部，路由只能像上述这样配置，也就是所有组件都在应用模块中声明，显然不是很推荐这种模式，切换回懒加载模式：

{ path: ' '，可以加载： [AuthGuard]，可以激活： [AuthGuard]，可以激活子级：[AuthGuard]，可以激活：[AuthGuard]，加载子级： ()=import ' ./page/pages . module ').然后(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 3360()=import('./组件/新闻/新闻.模块').然后(m=m.NewsModule) }，]浏览器截图：

明明我们的超文本标记语言写了头部和底部组件却没显示？

路由的本质：根据配置的小路路径去加载组件或者模块，此处我们是懒加载了路由，根据路由模块再去加载不同组件，唯独缺少了加载了页组件，其实理解整个并不难，index.html中有个app-root/app-root，这就表明应用组件被直接插入了数字正射影像图中，反观页组件，根本不存在直接插进数字正射影像图的情况，所以这个组件根本没被加载，验证我们的猜想很简单：

导出类页面组件实现on init { constructor()} { ngOnInit(){ 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 3360()=import('./组件/新闻/新闻.模块').然后(m=m.NewsModule) }，]}]；

这样写，页数组件就被加载了，重回正题，差点回不来，我们在登录组件中写了简单的登录逻辑：

从“@棱角分明/核心”导入{组件，在初始化时}；从" @角形/形状"导入{窗体组、窗体控件、验证器、窗体生成器}；从" @angular/router "导入{路由器}；@ Component({选择器： ' app-log in '，templateUrl: ' ./login.component.html '，style URL 3360[]./登录。组件。SCS ']})导出类LoginComponent实现在init { loginFOrm: FormGroup构造函数（私有fb: FormBuilder，私有Router : Router){ } ngOnInit(){这个。loginform=this。FB。group({ loginname :[' '，[Validators.required]]，password: [' '，[Validators。必选]]})；控制台。日志(这个。loginFOrm)；} loginSubmit(事件，值){ if(this。登录信息。有效){ window。本地存储。setitem(' loginfo '，JSON。stringify(这个。登录信息。值))；这个。路由器。navigatebyurl(' index ')；} }}守卫中：

canActivate(路由：激活droutesnapshot，状态： RouterStateSnapshot): boolean {//权限控制逻辑如是否登录/拥有访问权限console.log('canActivate '，route)；const isLogin=window。本地存储。GetItem(' login fo ')？真：假；if(！isLogin){控制台。日志(“登录”)；这个。路由器。navigatebyurl('登录')；}返回true}

路由离开（选定应用的组件是接触组件):

candelactivate(组件： contact组件，当前trout e :激活droutessnapshot，当前状态： routerstatesnapshot，下一个状态： routerstatesnapshot): Observableboolean | promisebon | boolean { console。log(' candelactivate ')；返回组件。page leave()；}{ path: 'contact '，canDeactivate: [AuthGuard]，component: ContactComponent，data: { title: '联系我们} } page leave(): Observableboolean {返回新的可观测值(ob={ if(！这个。这。莫代尔。警告({ nztitle : '正在离开，是否需要保存改动的数据？nzOnOk: ()={ //保存数据ob.next(假);警报("正在保存");this.isSaven=true}，nzCancelText: '取消，nzoncancel :()={ ob。下一个(真)；} });} else { ob。下一个(真)；} });}默认数据状态时未保存，可以选择不保存直接跳转也可以保存之后再跳转。