ionic——路由守卫

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

使用场景

只有当用户登录并拥有某些权限的时候才能进入某些路由。
一个由多个表单组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求 的信息才可以导航到下一个路由。
当用户未执行保存操作而试图离开当前导航时提醒用户

应用

CanActivate 判断用户权限

创建一个login.guard.ts

ionic g guards services/login

LoginGuard 类实现 CanActivate 接口，返回 true 或 false，Angular 根据返回值判断路由 通过或不通过。Guard 顾名思义就是用来保护一个路径。可以用来判断用户只有在满足一定的条件的情况 下才能打开这个路径对应的页面。

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; 
        } 
    }
}

路由里面配置路由守卫，打开app-routing.module.ts，在需要的路由跳转的路径限制。例如：

//引入权限判断的LoginGuard
import {LoginGuard} from './services/login.guard';
const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
 
  { path: 'checkout', loadChildren: './checkout/checkout.module#CheckoutPageModule' },  

  { 
    path: 'addressadd', 
    loadChildren: './addressadd/addressadd.module#AddressaddPageModule',
    canActivate:[LoginGuard]  //配置路由防卫
  },
  
  {     
    path: 'addressedit',     
    loadChildren: './addressedit/addressedit.module#AddresseditPageModule',
    canActivate:[LoginGuard]   //配置路由防卫
  },
  { path: 'payment', loadChildren: './payment/payment.module#PaymentPageModule' },
 
];

这样如果你没有登录就不被允许进入。