要求

　　后台提供的接口，不能让人随便输入个链接就能访问，而是要加入一个token，token是动态的，每次访问的时候判断，有权限并且未过期的时候才可以访问接口。

后台的设计是

　　在登录的时候，首先要post提交一个请求，根据用户名密码，返回一个动态token，这个token会在服务器保存一段时间。在前端的其他接口请求的时候，都要在header中添加这个token，后台会进行验证。只有验证成功，才会返回对应的接口内容，否则会抛出401异常。

请求效果

　　首先使用postman查看正常请求的效果
　　第一次登录请求时，添加了Header和Body以后，返回一个动态token，其结果如下：

　　服务器中保存了这个token值，然后再请求其他的get请求时，需要在Header中拼接这个token，才可以正常返回

 

添加token验证

　　Ionic的使用的是httpclient 实现的请求，所有的请求被我写到了一个公共的http-api.service.ts 里面去了
　　方法如下：

public access_token: string = '';
get<T>(endpoint: string, params?: any) {const headers = {headers: {'Authorization': this.access_token}};if (params) {if (!options) {options = {'params': params};} else {options['params'] = params;}}return this.http.get<T>(this.url + '/' + endpoint, headers);
}

 

　　在登录的时候，先进行token验证，并且将返回的验证码信息保存在http-api.service.ts 中

public firstPost(username: string, password: string) {const headers = {headers: {'Authorization': 'Basic Y2xpZW50OnNlY3JldA==','Content-Type': 'application/x-www-form-urlencoded'}};/*先token验证，虽然是post请求，但是发现直接将参数写到params 里面报错，所以就直接写到了url里面去了*/this.httpApi.post('oauth/token?grant_type=password&username=' + username + '&password=' + password, null, headers).subscribe(val => {
//返回值里，access_token代表生成的token验证码if (val != null && val['access_token'] != null) {this.httpApi.access_token = 'Bearer ' + val['access_token'];}}, response => {let toast = this.toastCtrl.create({message: '账号或密码错误',duration: 2000,position: 'bottom'});toast.present(toast);},() => {});
}

 备注：这样做的有一个缺点。因为把token值保存在service中，service是单例的，当service刷新的时候，这个token值就不存在了。而在angular中，网上说，刷新页面，就会刷新service。所以每次刷新页面，必须重新登录生成新的token 值，否则就会报401错误。为了解决这个问题，只有想办法把token值 保存在一个能够永远取到的地方了，比如 window.localStorage ，事实上这也是比较好的一个办法。

window.localStorage.setItem('access_token', 'Bearer ' + val['access_token']);

 

实现token超时，返回登录页面功能

1、添加自定义拦截器custom.error.handler.ts，如果返回401错误，这调用一个监听器方法，返回登录页（注意：a.这里Ionic 和 Angular是不一样的；b.没有@Injectable()，就没法使用构造函数）

import {ErrorHandler, Injectable} from "@angular/core";
import {Events} from "ionic-angular";@Injectable()
export class MyErrorHandler implements ErrorHandler {constructor(private events: Events) {}handleError(err: any): void {if (err.status === 401) {this.events.publish('userCheck');}// do something with the errorswitch (res.status) {
  }
}

 

2、在app.module.ts 中添加引入

import {MyErrorHandler} from "./service/custom.error.handler";
...providers: [{provide: ErrorHandler, useClass: MyErrorHandler}]
...

 

3、在一个Service 中添加一个全局变量，保证token超时只执行一次返回登录页方法

@Injectable()
export class CommonService {/*** 全局变量，保证userCheck 监听器方法，只执行一次* @type {boolean} true可以执行， false不可以执行*/public userCheckNum: boolean = true;
...

 

4、在tabs.ts文件中添加监听器

ionViewDidLoad() {this.userCheckListenEvents();
}ionViewWillUnload() {this.events.unsubscribe('userCheck');
}userCheckListenEvents() {this.events.subscribe('userCheck', () => {if(this.commonService.userCheckNum){this.commonService.userCheckNum = false;let loader = this.loadingCtrl.create({content: "链接超时，正在返回登录页",duration: 3000});loader.present();loader.onDidDismiss(() => {this.commonService.userCheckNum = true;this.nav.setRoot(LoginPage);});}});
}

 

附录

　　后台使用的是cuba platform 框架，cuba中关于token的设计是直接集成在登录功能里面的，在web-app.properties 配置文件里面可以进行配置
　　如果添加 cuba.rest.anonymousEnabled = true ，那么任何人都可以访问了，就没有token验证
　　如果有token验证，可以添加下面的配置，设置过期时间，单位是秒
　　　　cuba.rest.client.tokenExpirationTimeSec=60
　　具体参考官网文档：https://doc.cuba-platform.com/manual-6.8/rest_api_v2_ex_get_token.html

 

原创文章，欢迎转载，转载请注明出处！