人资项目 笔记

跨域: 非同源(协议, 域名, 端口一致)

解决开发环境的跨域问题

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