vue后台管理：增加vuex状态管理和封装axios请求

引入vuex状态管理

这里主要是参考了vue-element-admin的项目。先

先创建store的文件夹，创建index.js主文件：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

gettters.js文件：

const getters = {
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

modules/user.js文件

import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
import { login } from '@/api/user'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: ''
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {
  // user login
  login ({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.data.token)
        setToken(data.data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout ({ commit, state }) {
    return new Promise((resolve, reject) => {
      removeToken() // must remove  token  first
      resetRouter()
      commit('RESET_STATE')
      resolve()
    })
  },

  // remove token
  resetToken ({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在main.js进行配置

封装axios请求

首先创建utils/request.js

import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: '/api', // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// axios请求拦截
service.interceptors.request.use(config => {
  config.headers.Authorization = getToken()
  return config
})
// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code === 10) {
      store.dispatch('user/resetToken').then(() => {
        location.reload()
      })
      return Promise.reject(new Error('token 失效'))
    } else if (res.code !== 200) {
      return Promise.reject(new Error(res.msg))
    } else {
      return response
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

其实之前我们本来是写在main.js文件的，现在抽离出来写而已。
创建一个api文件夹，后面不同模块的请求就可以创建不一样的文件来使用了，这里我们是用户请求的api，所以在文件夹创建一个user.js文件。

import request from '@/utils/request'

// 登录
export function login (data) {
  return request({
    url: '/userLogin',
    method: 'post',
    data
  })
}

// 获取权限菜单
export function getMenus (data) {
  return request({
    url: '/getMenus',
    method: 'get',
    data
  })
}
// 获取用户列表
export function getUserList (data) {
  return request({
    url: '/getUserList',
    method: 'get',
    params: data
  })
}
// 更新用户状态
export function updateUserState (params) {
  return request({
    url: '/updateUserState',
    method: 'get',
    params
  })
}

// 添加用户
export function addUser (data) {
  return request({
    url: '/addUser',
    method: 'post',
    data
  })
}

// 根据id获取用户信息
export function getUser (id) {
  return request({
    url: `/getUser/${id}`,
    method: 'get'
  })
}

// 根据id编辑用户信息
export function editUser (id, data) {
  return request({
    url: `/editUser/${id}`,
    method: 'post',
    data
  })
}

// 根据id删除用户
export function deleteUser (id) {
  return request({
    url: `/deleteUser/${id}`,
    method: 'get'
  })
}

// 根据id删除用户
export function getRoles () {
  return request({
    url: '/getRoles',
    method: 'get'
  })
}

// 设置角色
export function setUserRole (userid, roleid) {
  return request({
    url: `/users/${userid}/role/${roleid}`,
    method: 'put'
  })
}

// 获取权限
export function rights (type) {
  return request({
    url: `/rights/${type}`,
    method: 'get'
  })
}

// 获取角色列表
export function roles () {
  return request({
    url: '/roles',
    method: 'get'
  })
}

// 删除角色里面的权限
export function deleteRightOfRole (roleid, rightid) {
  return request({
    url: `/roles/${roleid}/rights/${rightid}`,
    method: 'delete'
  })
}

// 分配权限
export function allotRights (roleid, data) {
  return request({
    url: `/roles/${roleid}/rights`,
    method: 'post',
    data
  })
}

// 添加和编辑角色
export function addOrEditRole (data) {
  return request({
    url: '/addOrEditRole',
    method: 'post',
    data
  })
}

// 分配权限
export function deleteRole (roleid) {
  return request({
    url: `/deleteRole/${roleid}`,
    method: 'get'
  })
}

使用方法：以首页获取菜单为例

先引入

import { getMenus } from '../../api/user'

请求：

getMenus () {
      getMenus(this.loginForm).then(response => {
        const { data } = response
        this.menuList = data.data
      }).catch(error => {
        this.$message.error(error)
      })
    }

目前git项目已经对原来请求方式进行了调整。

欢迎关注本人公众号和小程序，谢谢