封装小程序wx.request 添加token

      发布在:Notes, 前端技术      评论:0 条评论

先说一下为什么不使用fly.io,目前fly.io更大的方向还是为了多环境同步时做准备,一套代码适应h5、native、weex和小程序,这样看上去貌似确实使用它会方便很多,介于现在小程序和mpvue挖下的坑,想要在小程序上完美模拟浏览器时的vue并不好做,而且fly.io的小程序版本中的思路基本也是类似工厂模式,依靠promise来封装wx.requeset,提供统一对外的拦截器,那么问题来了,我经手的项目中大量使用token来认证,而存储token的时候小程序和网页的接口是全然不同的,需要额外复杂的代码来同时适配多端的存储接口,对于我这个项目只有3周的开发周期而言肯定是不划算的...

那么先直接放封装部分的代码

//
//     The Code By DayiTech FrontEnd
//     Author:Han
//     Created At 2018/09/13 16:26:36
//
/**
 * 封装小程序wx.request,带自定义token,返回一个promise对象
 * @param {Object} url:接口
 * @param {Object} type:请求类型
 * @param {Object} data:参数,json类型
 * @param {function} success:成功的回调函数
 * @param {fcuntion} fail:失败的回调函数
 * @return {Primise}
 */
export default function(param){
    let local_token = wx.getStorageSync('token');
    let header = {
        'content-type': 'application/json'
    }
    if(local_token){
        header['Authorization'] = local_token
    }
    return new Promise((resolve,reject) => {
        wx.request({
            header:header,
            url: param.url,
            data: param.data,
            method: param.type,
            dataType: 'json',
            success: res => {
                if(res.header.Authorization){
                    this.$store.commit('REFRESHTOKEN',res.header.Authorization)
                }
                resolve(res)
            },
            fail: res => {
                reject(res)
            },
        });
    })
}

main.js注册

import Vue from 'vue'
import App from './App'
import request from './utils/request'
Vue.config.productionTip = false
Vue.prototype.$store = store

Vue.prototype.$request = request

const app = new Vue(App)
app.$mount()

export default {

}

外部调用:

this.$request({
    url:'your url',
    data:{
    },
    type:'GET',
}).then((result) => {
}).catch((err) => {
});

token部分还是使用vuex来管理和存储,这里使用vuex推荐分模块写法

    src
        action.js
        getters.js
        index.js
        mutation-types.js
        mutations.js

mutation-types.js

export const LOGINED = 'LOGINED'
export const REFRESHTOKEN = 'REFRESHTOKEN'
export const LOGOUT = 'LOGOUT'

mutations.js

import {
    LOGOUT,
    REFRESHTOKEN,
    LOGINED
} from './mutation-types.js'

export default {
    [LOGINED](state,v){
        state.token = v
        wx.setStorageSync('token',v)
    },
    [REFRESHTOKEN](state,v){
        state.token = v
        wx.setStorageSync('token',v)
    },
    [LOGOUT](state,v){
        state.token = ''
        wx.removeStorageSync({ token: 'token' });
    }
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)

const state = {
    token:0,
    userInfo:{}
}

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

然后在main.js引入和调用即可

import store from './store'

Vue.prototype.$store = store
Responses