1。改造封装vue登录系统

一.hjhjhhhiio先配置开发环境api：

 1.1开发环境：

//.env.development 
VUE_APP_BASE_API = '需要请求API'

1.2线上环境:

/.env.production
VUE_APP_BASE_API = '需要请求API'

1.3更改package.json文件

"scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },

1.4使用

当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。

例如：

在js文件中直接使用

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 10000,
})

(12条消息) 在vue项目中：统一封装 Axios 接口与异常处理_喵容的博客-CSDN博客

二。对接口进行封装

1.通常将接口风封装src->until->request.js文件夹里面

1.1 先引入axios和element-ui里面的需要用到的组件：

import axios from 'axios'
import { Message } from 'element-ui'

1.2创建一个axios的实例：

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 90000 // request timeout
})

1.3 请求处理方法：

service.interceptors.request.use(
  config => {
    console.log('接口请求', config)
    // do something before request is sent
    if (sessionStorage.getItem('token') || localStorage.getItem('token')) {
      config.headers['Authorization'] = sessionStorage.getItem('token') || localStorage.getItem('token')
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

1.4返回响应请求：

service.interceptors.response.use(

  /**
   * 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
    console.log('接口返回', res)
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      // 后台返回的报错信息
      console.log('error logMsg', res.resultLog.logMsg)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

 1.5导出

export default service

完整代码:

import axios from 'axios'
import { Message } from 'element-ui'

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

// 请求方法处理
service.interceptors.request.use(
  config => {
    console.log('接口请求', config)
    // do something before request is sent
    if (sessionStorage.getItem('token') || localStorage.getItem('token')) {
      config.headers['Authorization'] = sessionStorage.getItem('token') || localStorage.getItem('token')
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// 返回响应处理
service.interceptors.response.use(

  /**
   * 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
    console.log('接口返回', res)
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      // 后台返回的报错信息
      console.log('error logMsg', res.resultLog.logMsg)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

• 而之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。
• 比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器，在这个里面请求登录的支持的content-type不同，所以单独又写一个实例，放在requestLogin.js里面：
• 

import axios from 'axios'

// 登录接口处理
// 创建一个axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 90000 // request timeout
})

// 请求方法处理
service.interceptors.request.use(
  config => {
    // do something before request is sent
    console.log('登录请求', config)
    config.headers['Content-Type'] = 'multipart/form-data'
    if (sessionStorage.getItem('token') || localStorage.getItem('token')) {
      config.headers['Authorization'] = sessionStorage.getItem('token') || localStorage.getItem('token')
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error)
    return Promise.reject(error)
  }
)

// 返回响应处理
service.interceptors.response.use(
  response => {
    const res = response.data
    // if the custom code is not 200, it is judged as an error.
    if (res.code !== 200) {
      // 后台返回的报错信息
      console.log('error logMsg', res.resultLog.logMsg)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('error', error)
    return Promise.reject(error)
  }
)

export default service

三。在src文件下创建api文件夹

import request from '@/utils/request'
import requestLogin from '@/utils/requestLogin'

// 登录
export function login(data) {
  return requestLogin({
    url: 'authority/login',
    method: 'post',
    data
  })
}
// 注册
export function register(data) {
  return request({
    url: 'authority/register',
    method: 'post',
    data
  })
}

// 忘记密码
export function forgetPass(data) {
  return request({
    url: 'authority/chgPassword',
    method: 'post',
    data
  })
}

// 获取手机验证码
export function getPhoneValidate(phoneNumber) {
  return request({
    url: 'authority/verificationCode',
    method: 'get',
    params: phoneNumber
  })
}

// 注销
export function logout(logoutToken) {
  return request({
    url: 'authority/logout',
    method: 'get',
    headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      'Authorization': logoutToken
    }
  })
}

对于用户名、密码这种信息通常保存到store里面去

store里面的信息：

import { login, logout, getPhoneValidate, forgetPass, register } from '@/api/user'
import { resetRouter } from '@/router'

const state = {
  name: '',
  userInfo: (sessionStorage.getItem(`userInfo`) && JSON.parse(sessionStorage.getItem(`userInfo`))) || {},
  phoneValidate: ''
}
const mutations = {
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_USERINFO: (state, userInfo) => {
    state.userInfo = userInfo
  },
  SET_PHONE: (state, phoneValidate) => {
    state.phoneValidate = phoneValidate
  }
}
const actions = {
  // 登录
  login({ commit }, userInfo) {
    const { username, password, rememberMe, teamId } = userInfo
    return new Promise((resolve, reject) => {
      // 登录以form-data形式传参
      const formData = new FormData()
      formData.set('account', username)
      formData.set('password', password)
      teamId && formData.set('teamId', teamId)
      login(formData).then(response => {
        const { user } = response
        // 记住用户信息 - 记住—》存localStorage中，不记住则下次打开就消失（sessionStorage中存储）
        if (rememberMe === true) {
          localStorage.setItem('token', user.jwtToken)
        } else {
          sessionStorage.setItem('token', user.jwtToken)
        }
        commit('SET_NAME', user.realName)
        sessionStorage.setItem('userInfo', JSON.stringify(user))
        state.userInfo = user
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 注册
  register({ commit }, params) {
    return new Promise((resolve, reject) => {
      register({ ...params }).then(response => {
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 获取验证码
  getPhoneValidate({ commit }, params) {
    return new Promise((resolve, reject) => {
      getPhoneValidate({ ...params }).then(response => {
        commit('SET_PHONE', response.message)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 忘记密码
  forgetPass({ commit }, params) {
    return new Promise((resolve, reject) => {
      forgetPass({ ...params }).then(response => {
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // 注销 - 登出
  logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
      const token = localStorage.getItem('token') || sessionStorage.getItem('token')
      logout(token).then(() => {
        // 去掉token
        sessionStorage.setItem('token', '')
        localStorage.setItem('token', '')
        resetRouter()
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }

}

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