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

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

我们在实际开发中,会有这样一种场景。

有些页面是允许访客登录的,有些页面是强制用户登录的。

后者,我们希望当用户没有登录的时候,无法直接进去页面,

而是先跳转到登录页面,或者先给出让用户登录的提示。


路由守卫

两种方法选一种就好了,文件名有冲突哦。推荐第二种。

方法一:

在src/app目录下新建guards文件夹

在src/app/guards目录下新建login.guard.ts文件

在src/app/guards/login.guard.ts文件中,

键入a-guard-can-activate回车。

image.png

Angular TypeScript Snippets插件自动帮我们编写文件。

image.png

没有安装插件的可以查阅:Angular最新教程-第一节环境搭建和新建项目http://blog.csdn.net/onil_chen/article/details/77934685 

修改class为LoginGuard。

方法二:使用generate

ng generate guard guards/login

image.png

然后将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。

image.png

在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还是可以访问。

查阅官方文档说明。

image.png

canActivate里面的参数是route,新建文件的参数是next。

将next修改成route就可以正常使用了(囧)。

源代码:百度云 实际代码变化较少,不更新压缩文件。


码云:https://gitee.com/xiaohuOni/oniplan-ng 

有码云的帮忙给个star,感谢。


这节课的内容就到这里完成了。

感谢您的阅读。

我是莽夫,希望你开心。

目录
相关文章
|
6天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
14 0
|
8天前
|
C++
【angular】启动项目和路由配置
【angular】启动项目和路由配置
19 1
|
5月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
5月前
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
|
5月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
23天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
5月前
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
|
JavaScript 数据安全/隐私保护 索引
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
158 0
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
|
Perl
Angular最新教程-第十三节 管道Pipes 自定义管道
Angular最新教程-第十三节 管道Pipes 自定义管道
108 0
Angular最新教程-第十三节 管道Pipes 自定义管道
|
JSON 前端开发 JavaScript
Angular最新教程-第十二节 管道Pipes 内置管道
Angular最新教程-第十二节 管道Pipes 内置管道
256 0

热门文章

最新文章