1500字范文 > Ionic3的http请求如何实现token验证并且超时返回登录页

Ionic3的http请求如何实现token验证并且超时返回登录页

时间：2022-03-14 11:12:20

要求

后台提供的接口，不能让人随便输入个链接就能访问，而是要加入一个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(monService.userCheckNum){monService.userCheckNum = false;let loader = this.loadingCtrl.create({content: "链接超时，正在返回登录页",duration: 3000});loader.present();loader.onDidDismiss(() => {monService.userCheckNum = true;this.nav.setRoot(LoginPage);});}});}