前端通用后台登录解决方案（一站式解决封装axios模块、接口请求模块、登录请求动作、本地缓存处理、登录鉴权解决）

目录

封装 axios 模块

封装接口请求模块

封装登录请求动作

触发登录动作

本地缓存处理方案

响应数据的统一处理 

登录鉴权解决方案

---

封装 axios 模块 💨 

我们希望封装出来的 axios 模块，至少需要具备一种能力，那就是：根据当前模式的不同，设定不同的 BaseUrl ，因为通常情况下企业级项目在 开发状态 和 生产状态 下它的 baseUrl 是不同的。

我们可以在项目中创建两个文件：

1.  .env.development 
2.  .env.production 

它们分别对应 开发状态 和 生产状态。

我们可以在上面两个文件中分别写入以下代码：

.env.development：

# 标志
ENV = 'development'
 
# base api
VUE_APP_BASE_API = '/api'

.env.production：

# 标志
ENV = 'production'
 
# base api
VUE_APP_BASE_API = '/prod-api'

有了这两个文件之后，我们就可以创建对应的 axios 模块

创建 utils / request.js ，我们在这里配置发送 axios 请求的基本信息，写入如下代码：

import axios from 'axios'
 
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})
 
export default service

这里 process.env.VUE_APP_BASE_API 可以根据当前模式的不同来设定我们前文设置好的 baseURL 

有了 axios 模块之后，接下来我们就可以

1. 封装接口请求模块
2. 封装登录请求动

封装接口请求模块 💨 

创建 api 文件夹，我们把所有的接口请求模块都放到这个文件夹里，例如登陆注册是一个模块，请求首页文章信息是一个模块：

创建 sys.js ，我们在这里编写登录的接口请求函数：

import request from '@/utils/request'
 
/**
 * 登录
 */
export const login = data => {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}

现在调用这个方法返回的就是一个promise对象 

封装登录请求动作 💨 

什么是登录请求动作呢，就是我们不想在登陆页面中直接调用接口请求方法，而是想把它封装在vuex的模块里，我们在 store 下创建 modules 文件夹，创建 user.js 模块，用于处理所有和用户相关的内容（此处需要使用第三方包 md5 ）。

modules/user.js:

import { login } from '@/api/sys'
import md5 from 'md5'
export default {
  namespaced: true,
  state: () => ({}),
  mutations: {},
  actions: {
    login(context, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: md5(password)
        })
          .then(data => {
            resolve()
          })
          .catch(err => {
            reject(err)
          })
      })
    }
  }
}

注意：这里的md5是一种加密方法，用于加密密码，同学们可以 npm install 来安装。在user.js的actions中，我们把登录请求的动作封装好了，我们在返回的promise对象中调用接口请求模块 login，然后把参数传递进去，返回的promise实例我们通过 then 和 catch 进行接收。

然后我们还需要在 store 的 index.js 中完成注册：

import { createStore } from 'vuex'
import user from './modules/user.js'
export default createStore({
  modules: {
    user
  }
})

 

触发登录动作 💨 

我们先看一下登录界面主要逻辑的代码：