Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)

我们在实际开发中,会有这样一种场景。
有些页面是允许访客登录的,有些页面是强制用户登录的。
后者,我们希望当用户没有登录的时候,无法直接进去页面,
而是先跳转到登录页面,或者先给出让用户登录的提示。

路由守卫

两种方法选一种就好了,文件名有冲突哦。推荐第二种。
方法一:
在src/app目录下新建guards文件夹
在src/app/guards目录下新建login.guard.ts文件
在src/app/guards/login.guard.ts文件中,
键入a-guard-can-activate回车。
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)_第1张图片
Angular TypeScript Snippets插件自动帮我们编写文件。
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)_第2张图片
没有安装插件的可以查阅:Angular最新教程-第一节环境搭建和新建项目http://blog.csdn.net/onil_chen/article/details/77934685
修改class为LoginGuard。
方法二:使用generate
ng generate guard guards/login
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)_第3张图片
然后将LoginGuard加到src\app\app.module.ts的路由配置中。

路由器钩子函数

在src\app\app.module.ts头部导入
import { LoginGuard } from './guards/login.guard';
这里要是用路由器的钩子函数canActivate
{path:'update',component:LatestComponent,canActivate:[LoginGuard]},
保存运行,报错了。提示LoginGuard中没有provider。
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)_第4张图片
在src\app\app.module.ts中的@NgModule的providers里加入LoginGuard。

providers: [
    LoginGuard,
    {provide:LocationStrategy,useClass:HashLocationStrategy},
    {provide:APP_BASE_HREF,useValue:'/'}
  ],

将src\app\guards\login.guard.ts中的第10行返回true修改为false。
http://localhost:4200/#/update还是可以访问。
查阅官方文档说明。
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)_第5张图片
canActivate里面的参数是route,新建文件的参数是next。
将next修改成route就可以正常使用了(囧)。

源代码:百度云 实际代码变化较少,不更新压缩文件。
码云:https://gitee.com/xiaohuOni/oniplan-ng
有码云的帮忙给个star,感谢。

这节课的内容就到这里完成了。
感谢您的阅读。
我是莽夫,希望你开心。
如果你觉得本文对你有帮助,请扫描文末二维码,支持博主原创。
希望大家关注我的个人公众号ionic_
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)_第6张图片

转载于:https://my.oschina.net/xiaohuoni/blog/1547974

你可能感兴趣的:(javascript,ViewUI)