一、路由守卫

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

2、路由守卫场景：

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

3、路由守卫

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

• CanActivate: 处理导航到某路由的情况。判断用户有没有权限访问
• CanDeactivate: 处理从当前路由离开的情况。离开时弹窗是否保存信息，也可以写在离开的生命周期函数里
• Resolve: 在路由激活之前获取路由数据。

详情参考：http://bbs.itying.com/topic/5cd0f7dd344fb3153804ee69

 

二、CanActivate 判断用户权限

1、创建一个login的守卫

ionic g guard services/login

【login.guard.ts】

精简成如下：

 

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

（1）【login.guard.ts】

获取用户信息，用到StorageService，并判断用户是否登录

 

 

 

（2）【app-routing.module.ts】哪些路由需要守卫

先引入路由LoginGuard

在需要守卫的路由下面加一行：canActivate: [LoginGuard]

意义：当LoginGuard返回true时，才可以访问对应的页面，返回false，不可以访问

 

（3）【login.guard.ts】的canActivate()方法里加打印，看进入有守卫的页面addresslist、addressadd、addressedit时，控制台是否输出打印console.log('canActivate!!!!');

当用户登录时，可以进入这些页面，并且控制台输出canActivate!!!!

当用户退出登录时，在浏览器地址栏里手动输入：http://localhost:8100/addresslist，是进不去的

 

（4）把之前写的判断用户登录的代码删掉，做精简

【addressadd.page.ts】

改成：

有路由守卫了，就不需要用临时变量userinfo来判断用户是否登录了

因为有路由守卫，能进到这个页面，必然是已经登录了的，所以直接把用户信息赋给全局变量this.userinfo

没有登录是进不了这个页面的

 

【addressedit.page.ts】

改成：

 

【addresslist.page.ts】

改成：

 

三、CanDeactivate 、Resolve 守卫
请参考：http://bbs.itying.com/topic/5cd0f7dd344fb3153804ee69

 

---

最终代码

【login.guard.ts】

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { StorageService } from '../services/storage.service';@Injectable({providedIn: 'root'
})
export class LoginGuard implements CanActivate {constructor(public storage: StorageService) {}canActivate() {console.log('canActivate!!!!');// 获取用户信息var userinfo = this.storage.get('userinfo');// 判断用户是否登录if(!userinfo || !userinfo.username) {// 用户没有登录，返回falsereturn false;} else {// 用户已登录，返回truereturn true;}}
}

【app-routing.module.ts】

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
// 引入权限判断的LoginGuard
import { LoginGuard } from './services/login.guard';const routes: Routes = [{path: '',loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)},{path: 'search',loadChildren: () => import('./search/search.module').then( m => m.SearchPageModule)},{path: 'login',loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)},{path: 'register-step1',loadChildren: () => import('./register-step1/register-step1.module').then( m => m.RegisterStep1PageModule)},{path: 'register-step2',loadChildren: () => import('./register-step2/register-step2.module').then( m => m.RegisterStep2PageModule)},{path: 'register-step3',loadChildren: () => import('./register-step3/register-step3.module').then( m => m.RegisterStep3PageModule)},{path: 'productlist',loadChildren: () => import('./productlist/productlist.module').then( m => m.ProductlistPageModule)},{path: 'pcontent',loadChildren: () => import('./pcontent/pcontent.module').then( m => m.PcontentPageModule)},{path: 'personal',loadChildren: () => import('./personal/personal.module').then( m => m.PersonalPageModule)},{path: 'cart',loadChildren: () => import('./cart/cart.module').then( m => m.CartPageModule)},{path: 'checkout',loadChildren: () => import('./checkout/checkout.module').then( m => m.CheckoutPageModule)},{path: 'addresslist',loadChildren: () => import('./addresslist/addresslist.module').then( m => m.AddresslistPageModule),canActivate: [LoginGuard]},{path: 'addressadd',loadChildren: () => import('./addressadd/addressadd.module').then( m => m.AddressaddPageModule),canActivate: [LoginGuard]},{path: 'addressedit',loadChildren: () => import('./addressedit/addressedit.module').then( m => m.AddresseditPageModule),canActivate: [LoginGuard]}];
@NgModule({imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],exports: [RouterModule]
})
export class AppRoutingModule {}

【addressadd.page.ts】

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../services/common.service';
import { StorageService } from '../services/storage.service';
import { NavController } from '@ionic/angular';@Component({selector: 'app-addressadd',templateUrl: './addressadd.page.html',styleUrls: ['./addressadd.page.scss'],
})
export class AddressaddPage implements OnInit {// 用于数据双向绑定public addressList: any = {name:'',phone:'',address:''}// 获取用户信息public userinfo: any = {};constructor(public common: CommonService,public storage: StorageService,public navController: NavController) { }ngOnInit() {// 获取用户信息this.userinfo = this.storage.get('userinfo');}doAddAddress() {// 判断数据是否合法if(!this.addressList.name || !this.addressList.phone || !this.addressList.address) {  // 数据不存在alert('数据不能为空！');} else {// 生成签名，把所有的参数放进去 + salt（私钥）var sign = this.common.sign({uid: this.userinfo._id,name: this.addressList.name,phone: this.addressList.phone,address: this.addressList.address,salt: this.userinfo.salt,// salt（私钥）—— 是用户注册的时候随机生成的字符串然后通过 md5 加密得到的，每个用户的 salt 不一样// timestamp: ''  时间戳，请求的唯一性})// 向服务器提交新增地址数据，var addAddressJson = {uid: this.userinfo._id,sign: sign,name: this.addressList.name,phone: this.addressList.phone,address: this.addressList.address,// timestamp: ''  时间戳，请求的唯一性}var api = 'api/addAddress';this.common.ajaxPost(api, addAddressJson).then((data:any) => {console.log(data);if(data.success) {// 回到收货地址列表，跳转用navcontrollerthis.navController.back();} else {alert(data.message);}})}}
}

【addressedit.page.ts】

import { Component, OnInit } from '@angular/core';
// 获取get传值
import { ActivatedRoute } from '@angular/router';
import { CommonService } from '../services/common.service';
import { StorageService } from '../services/storage.service';
import { NavController } from '@ionic/angular';@Component({selector: 'app-addressedit',templateUrl: './addressedit.page.html',styleUrls: ['./addressedit.page.scss'],
})
export class AddresseditPage implements OnInit {// 编辑收货地址的数据，用于数据双向绑定public addressList: any = {};// 获取用户信息public userinfo: any = {};constructor(public activatedRoute: ActivatedRoute,public common: CommonService,public storage: StorageService,public navController: NavController) { }ngOnInit() {// 获取get传值(url传过来所有的数据)this.activatedRoute.queryParams.subscribe((data) => {console.log(data);// data返回的get传值对象是一个不可改变的对象// this.addressList = data;this.addressList = JSON.parse(JSON.stringify(data));})// 获取用户信息this.userinfo = this.storage.get('userinfo');}doEditAddress() {console.log(this.addressList);// 签名var sign = this.common.sign({uid: this.userinfo._id,id: this.addressList._id,name: this.addressList.name,phone: this.addressList.phone,address: this.addressList.address,salt: this.userinfo.salt})// 向服务器申请修改收货地址var api = 'api/editAddress';this.common.ajaxPost(api, {uid: this.userinfo._id,id: this.addressList._id,name: this.addressList.name,phone: this.addressList.phone,address: this.addressList.address,sign: sign}).then((data:any) => {console.log(data);if(data.success) {// 跳转回去this.navController.back();} else {alert(data.message);}})}}

【addresslist.page.ts】

import { Component, OnInit } from '@angular/core';
import { CommonService } from '../services/common.service';
import { StorageService } from '../services/storage.service';
import { NavController, AlertController } from '@ionic/angular';@Component({selector: 'app-addresslist',templateUrl: './addresslist.page.html',styleUrls: ['./addresslist.page.scss'],
})
export class AddresslistPage implements OnInit {// 获取用户信息public userinfo: any = {};// 用户所有收货地址，用于数据双向绑定public list: any[] = [];constructor(public common: CommonService,public storage: StorageService,public navController: NavController,public alertController: AlertController) {// 获取用户信息this.userinfo = this.storage.get('userinfo');}ngOnInit() {}ionViewDidEnter() {//每次进来都要触发this.getAddressList();}/* 获取用户全部地址 */getAddressList() {// 签名var sign = this.common.sign({uid: this.userinfo._id,salt: this.userinfo.salt})// 请求服务器数据var api = 'api/addressList?uid=' + this.userinfo._id + '&sign=' + sign;this.common.ajaxGet(api).then((data: any) => {console.log(data);this.list = data.result;})}/* 修改默认地址 */changeDefualtAddress(address_id) {// 签名var sign = this.common.sign({uid: this.userinfo._id,id: address_id,salt: this.userinfo.salt})// 向服务器请求数据var api = 'api/changeDefaultAddress';this.common.ajaxPost(api, {uid: this.userinfo._id,id: address_id,sign: sign}).then((data: any) => {console.log(data);if (data.success) { // if(data.success == true) // 返回确认订单页面 NavController// this.navController.back() 不行，万一上一级时增加页面，这里返回的是增加页面（从哪儿来回哪儿去）this.navController.navigateBack('/checkout');} else {alert(data.message);}})}/* 删除收货地址弹窗 */async removeAddress(key, address_id) {const alert = await this.alertController.create({cssClass: 'my-custom-class',header: '提示',message: '确定要删除吗？',backdropDismiss: false,// backdropDismiss: false点击空白处弹窗不消失buttons: [{text: '取消',role: 'cancel',cssClass: 'secondary',handler: (blah) => {console.log('Confirm Cancel: blah');}}, {text: '确定',handler: () => {console.log('Confirm Okay');// 向服务器请求删除收货地址，成功后把本地存储该条数据删除，同时渲染页面this.doRemoveAddress(key, address_id);}}]});await alert.present();}/* 向服务器请求删除收货地址 */doRemoveAddress(key, address_id) {// 签名var sign = this.common.sign({uid: this.userinfo._id,id: address_id,salt: this.userinfo.salt})// 向服务器请求删除收货地址var api = 'api/deleteAddress';this.common.ajaxPost(api, {uid: this.userinfo._id,id: address_id,sign: sign}).then((data:any) => {console.log(data);if(data.success) {// 把本地存储里该条数据删掉，由于数据双向绑定，删除以后页面自动更新this.list.splice(key, 1);} else {alert(data.message);}})}
}