跨域: 非同源(协议, 域名, 端口一致)
解决开发环境的跨域问题
vue-cli配置webpack的反向代理
在vue.config.js
里设置 module.exports = {
devServer: {
}
处理token:
在src/utils/auth.js中:
import Cookies from 'js-cookie' // 本地存储
const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key
export function getToken() {
return Cookies.get(TokenKey)
}
export function setToken(token) {
return Cookies.set(TokenKey, token)
}
export function removeToken() {
return Cookies.remove(TokenKey)
}
在store/user.js中:
import { getToken, setToken, removeToken } from '@/utils/auth'
import { login } from '@/api/user'
const state = {
token: getToken(), // 设置token为共享状态, 初始化vuex的时候, 就先从缓存中读取
}
const mutations = {
setToken(state, token) {
state.token = token
setToken(token)
},
removeToken(state) {
state.token = null // 先删除vuex的token
removeToken() // 再清除本地存储中的
}
}
const actions = {
async login(context, data) {
const result = await login(data)
// 判断是否成功 是否有token值
// if (result.data.success) {
// const token = result.data.data
// context.commit('setToken', token)
// }
// 已经在响应拦截器处理过了
context.commit('setToken', result)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
处理axios的响应拦截器
在utils/request.js中:
import axios from 'axios'
import { Message } from 'element-ui'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000, // 设置超时时间
})
service.interceptors.request.use()
// 响应拦截器
service.interceptors.response.use(response => {
// axios默认加了一层data
const { success, message, data } = response.data
// 要根据success的成功与否决定下面的操作
if (success) {
return data
} else {
// 失败了不能进then 应该进catch
Message.error(message) // 提示错误信息
return Promise.reject(new Error(message))
}
}, error => {
Message.error(error.message) // 提示错误信息
return Promi