uniapp 实现简易的token认证机制的request框架

  • A+
所属分类:uniapp 前端

由于在发送http请求的时候需要验证token。登陆后我们需要把Authorization字段的值放到header里面。目的是需要有统一处理的地方。

  1. 微信中的认证流程的时序图

image

  1. 需要基于 uni.request(options) 做一次封装

    import config from './config'class HttpRequest {
      constructor() {
        console.log('HttpRequest');
      }
    
      request(options) {
        options.url = config.baseUrl + options.url;
        try {
          const token = uni.getStorageSync('token');
          if (token) {
            options.header = {
              'Authorization' : token        };
          }
        } catch (err) {
          console.log(err)
        }
        return uni.request(options);
      }}export default new HttpRequest;

  2. 在登陆接口中处理token

    import http from './base.request.js'export const login = (code) => {
      return http.request({
        url: '/user/wx/login',
        data: {
          js_code: code    }
      }).then(function(data) {
        let [error, res] = data;
        if (error) {
          return Promise.reject(error);
        }
        let token = res.data.wx.openid;
        console.log(token);
        try {
          uni.setStorageSync('token', token);
        } catch (e) {
          //TODO handle the exception
        }
        return Promise.resolve(data);
      });}

  3. 其他模块的请求按照现有模式进行

    import http from './base.request.js'export const getCrabList = () => {
      return http.request({
        url: '/craps/product/list'
      })}

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: