Vuex和Axios企业级实战

前端AXIOS网络请求实战

网络请求工具的封装

import axios from 'axios'
import router from '../router'


const service = axios.create({
  baseURL:'' /*store.state.migrateInfo.region == "sh" ? process.env.VUE_APP_API_ROOT : "h1"*/,  //api的base_url
  timeout: 60000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  responseType: 'json', // 默认的
  withCredentials: false, // 默认的
})

service.interceptors.request.use(
  config => {
    if (window['localStorage'].getItem('token') && window['localStorage'].getItem('openId')) {
      config.headers['token'] = window['localStorage'].getItem("token");
      config.headers['openId'] = window['localStorage'].getItem("openId");
    }
    return config
  },
  error => {
    return Promise.reject(error);
  }
)

service.interceptors.response.use(
  response => {
    if (response.status == 200) {
      if(response.data.code == 1001 || response.data.code == 1002 || response.data.code == 1003 || response.data.code == 1004){
        // router.replace({ name:'Login'});
        window.location.href = process.env.CMB_LOGIN;
        return Promise.reject('token invalid');
      }
        return response;

    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)


export default service

API包下后端接口层封装

import fetch from "../util/fetch";

const ZH_OPEN = process.env.ZH_OPEN

export function Login(data) {
  return fetch({
    url: ZH_OPEN + 'login',
    method: 'post',
    params: data
  })
}

vuex层的封装

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

Vue.use(Vuex)
import LoginInfo from "./module/LoginInfo";

export default new Vuex.Store({

  modules: {
    LoginInfo
  }
})

然后vuex下的每一个模块

import {Login} from "../../api/login";

const LoginInfo = {
  state: {
    userInfo: {
      userName: '',
      userId: ''
    },
    authority_DOC_EDIT: false, //开发文档模块的管理权限
    authority_ANNOUNCEMENT_RELEASE: false, //消息中心管理权限
  },
  mutations: {

    SET_AUTHORITY_DOC_EDIT(state, params){
      state.authority_DOC_EDIT = params;
    },
    SET_AUTHORITY_ANNOUNCEMENT_RELEASE(state, params){
      state.authority_ANNOUNCEMENT_RELEASE = params;
    },
    SET_USER_INFO(state, params) {
      state.userName = params.userName;
      state.userId = params.userId;
    

      //浏览器会话结束时过期
      $cookies.set("userName", params.userName, 60 * 60 * 3);
      $cookies.set("userId", params.userId, 60 * 60 * 3);

      window['localStorage'].setItem('token', params.idToken)
    }
  },
  actions: {
    Login ({commit}, params) {
      return new Promise((resolve, reject) => {
        Login(params).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

  }
}

export default LoginInfo