Angular路由守卫

一、路由守卫

当用户满足一定条件才被允许进入或者离开一个路由。

路由守卫场景：

只有当用户登录并拥有某些权限的时候才能进入某些路由。

一个由多个表单组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。

当用户未执行保存操作而试图离开当前导航时提醒用户。

Angular提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫，可以通过这些钩子实现上面场景。

• CanActivate: 处理导航到某路由的情况。
• CanDeactivate: 处理从当前路由离开的情况。
• Resolve: 在路由激活之前获取路由数据。

配置路由时候用到一些属性，path, component, outlet, children, 路由守卫也是路由属性。

二、CanActivate

实例：只让登录用户进入其他信息路由。

新建guard目录。目录下新建login.guard.ts。

LoginGuard类实现CanActivate接口，返回true或false，Angular根据返回值判断请求通过或不通过。 

export class LoginGuard implements CanActivate{
    constructor(private router: Router) {

    }

    canActivate(){
        const token = localStorage.getItem('token');
        // 如果token有值，表示登录成功，继续跳转，否则跳转到首页
        if (token) { 
            console.log("登陆成功");
            return true; 
        }
        console.log("登陆失败");
        this.router.navigate(["/route/login"]);
        return false;
    }
}

配置product路由。先把LoginGuard加入providers，在指定路由守卫。

canActivate可以指定多个守卫，值是一个数组。

const routes: Routes = [
    { path: 'login', loadChildren: './login/login.module#LoginModule'},
    { path: 'systest', loadChildren: './systest/systest.module#SystestModule',canActivate:[LoginGuard] },
    { path: 'functest', loadChildren: './functest/functest.module#FunctestModule',canActivate:[LoginGuard] },
    { path: 'logprint', loadChildren: './logprint/logprint.module#LogprintModule',canActivate:[LoginGuard] },
    { path: 'regulation', loadChildren: './regulation/regulation.module#Regulation