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,感谢。


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

感谢您的阅读。

我是莽夫,希望你开心。

目录
打赏
0
0
0
0
17
分享
相关文章
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
225 0
|
8月前
|
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
107 0
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
235 0
让 JSF 应用秒变搜索引擎宠儿!揭秘 SEO 优化的神奇魔法,让你的网站脱颖而出!
【8月更文挑战第31天】随着互联网的发展,搜索引擎已成为用户获取信息的主要途径,SEO 对 Web 应用至关重要。本文介绍如何提升 JavaServer Faces(JSF)应用的 SEO 友好性,包括关键词优化、网页结构优化和外部链接建设等基础知识,并提出了使用语义化 HTML 标签、优化页面标题和描述、生成静态 HTML 页面及 URL 重写等具体策略,帮助您的网站在搜索引擎中获得更高排名。
47 0
精通Angular路由管理:从基础设置到高级配置,打造复杂SPA导航系统的全方位指南
【8月更文挑战第31天】在单页应用(SPA)中,路由管理至关重要。Angular通过其强大的路由模块提供灵活高效的解决方案。本文通过代码示例详细介绍如何在Angular中设置和管理路由,包括基础路由配置、懒加载、路由保护及高级配置,帮助开发者构建高效安全的导航系统,满足复杂SPA需求。随着Angular的发展,路由管理将更加完善,值得持续关注。
84 0
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
108 0
如何在 Angular 路由中使用路由解析器
如何在 Angular 路由中使用路由解析器
51 0
|
8月前
如何在 Angular 路由中使用路由守卫
如何在 Angular 路由中使用路由守卫
87 0
|
8月前
如何在 Angular 路由中使用查询参数
如何在 Angular 路由中使用查询参数
57 0
如何在 Angular 中使用懒加载路由
如何在 Angular 中使用懒加载路由
85 0