Angular路由守卫
路由守卫
简介
目前,任何用户都能在任何时候导航到任何地方,对于大部分应用,这样是存在安全问题的,某些用户可能无权导航到目标组件,需要先登录(认证)
在显示目标组件前，可能需要先获取某些数据。
在离开组件前，可能要先保存修改.需要询问用户:是否要放弃本次更改,而不用保存它们?
对于上述这些场景问题,往往需要在路由配置中添加守卫,进行处理.
返回值
守卫通过返回一个值，以控制路由器的行为：
-
如果它返回 true，导航过程会继续
-
如果它返回 false，导航过程就会终止，且用户留在原地。
-
如果它返回 UrlTree，则取消当前的导航，并且开始导航到返回的这个 UrlTree.
守卫还可以告诉路由器导航到别处，这样也会取消当前的导航。要想在守卫中这么做，就要返回 false;
守卫可以用同步的方式返回一个布尔值,但在很多情况下,守卫无法用同步的方式给出答案.守卫可能会向用户问一个问题、把更改保存到服务器，或者获取新数据，而这些都是异步操作。因此，路由的守卫可以返回一个Observable
提供给路由器的可观察对象还必须能结束,否则,导航就不会继续.
守卫接口
路由器可以支持多种守卫接口：
* 用CanActivate来处理导航到某路由的情况。
* 用CanActivateChild来处理导航到某子路由的情况。
* 用CanDeactivate来处理从当前路由离开的情况.
* 用Resolve在路由激活之前获取路由数据。
* 用CanLoad来处理异步导航到某特性模块的情况。
在分层路由的每个级别上,你都可以设置多个守卫,上面提到过的空路由,在这里会可能发挥很好的作用
路由器会先按照从最深的子路由 由下往上检查的顺序来检查CanDeactivate() 和CanActivateChild() 守卫.然后它会按照从上到下的顺序检查CanActivate()守卫. 如果特性模块是异步加载的,在加载它之前还会检查CanLoad()守卫. 如果任何一个守卫返回 false,其它尚未完成的守卫会被取消,这样整个导航就被取消.
使用
- 生成一个守卫
//添加一个auth守卫
ng generate guard auth (简写ng g g auth/auth)
生成的守卫会自动实现canactivate,若异步加载模块的，还需要实现CanLoad
在守卫里进行安全的逻辑设置，可以用与服务结合实现
export class AuthGuard implements CanActivate{}
- 添加进路由（假设访问info界面需要登录）
{ path: 'info', canActivate: [AuthGuard], component: WorkComponent },
