Ionic4--路由守卫

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

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

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

 

1、创建一个 login.guard.ts

ionic g guard services/login

 

2、LoginGuard 类实现 CanActivate 接口，返回 true 或 false，Angular 根据返回值判断路由 通过或不通过

import { CanActivate } from "@angular/router";
export class LoginGuard implements CanActivate{
    canActivate(){
        var userinfo=this.storage.get('userinfo');
        if(!userinfo || !userinfo.username){
            return false;
        }else{
             return true;
        }
    }
}

 

3、路由里面配置路由守卫

{ 
    path: 'addresslist',
	loadChildren: './addresslist/addresslist.module#AddresslistPageModule',
	canActivate:[LoginGuard] 
},