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

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

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

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

image

2. 需要基于 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;
   

3. 在登陆接口中处理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);
     });
   }
   

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

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

5. 未完待续，