1.背景介绍

登录功能，是前端经常要完成的需求之一。

但是如何进行登录判断？

以上这些，都是本次小课堂要讲解的重点！

2.知识剖析

路由卫士

创建路由后，任何用户都能在任何时候导航到任何地方。 但有时候这样是不对的。 该用户可能无权导航到目标组件。 可能用户得先登录（认证）。 在显示目标组件前，你可能得先获取某些数据。 在离开组件前，你可能要先保存修改。 你可能要询问用户：你是否要放弃本次更改，而不用保存它们？ 你可以往路由配置中添加守卫，来处理这些场景。 守卫返回一个值，以控制路由器的行为： 如果它返回 true，导航过程会继续 如果它返回 false，导航过程会终止，且用户会留在原地。

守卫还可以告诉路由器导航到别处，这样也取消当前的导航。 守卫可以用同步的方式返回一个布尔值。但在很多情况下，守卫无法用同步的方式给出答案。 守卫可能会向用户问一个问题、把更改保存到服务器，或者获取新数据，而这些都是异步操作。 因此，路由的守卫可以返回一个 Observable 或 Promise，并且路由器会等待这个可观察对象被解析为 true 或 false。

3.常见问题

如何使用路由卫士？

解决方案

利用CanActivate接口及 localStorage

1. 新增卫士服务，负责认证和授权资源

2. 导入路由模块

3. 登录时，退出时的操作

5.编码实战

6.扩展思考

安全性考虑

在过于依赖客户端路由保护为我们提供安全性之前，理解它的 工作机制是至关重要的。实际上，你应该把客户端路由保护看作用户体验的一 种形式，而不是安全的一种形式。 归根到底，应用的所有JavaScript代码都会服务于客户端。不管用户是否已经登 录，这些代码都能被检测到。 因此，如果有敏感数据需要保护，你必须使用服务器端认证来保护它们。也就 是说， 对每条查询数据的请求， 都要求用户提供一个服务器验证的有效API密钥 （或者认证令牌） 。 构建完整的认证系统超出了本小课堂的范围。最重要的是要明白，在客户端保护路 由并不一定会阻挡任何人查看这些路由背后的JavaScript页面。

7.参考文献

参考一：HTML5 WebStorage

参考二：360百科

参考二：Nancy的专栏

8.更多讨论

鸣谢

感谢大家观看

BY : 金俊