封装axios、token、proxy代理——vue,axios,vue-axios,element-ui

下载

npm install axios

npm install --save vue-axios

1.axios请求

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Mock from 'mockjs'
// 必须要加下面这句话，否则无法使用编程式导航
import router from '../../src/router/index'
import { Message,MessageBox } from 'element-ui';
// 设置为全局属性
Vue.use(VueAxios, axios)
Vue.prototype.Mock = Mock
/// 配置请求基础URL地址

if (process.env.NODE_ENV === "production") {
    // axios.defaults.baseURL = 'https://api.apiopen.top/api'
    axios.defaults.baseURL = 'http://bidding.cunkou.co'
} else {
    // 配置默认API地址
    // axios.defaults.baseURL = ' http://localhost:8000'
     axios.defaults.baseURL = '',
        // 配置默认超时时间
     axios.defaults.timeout = 3000
     axios.defaults.headers ={
        "Accept": "application/json",
        "Content-Type": "application/json",
      }
}


// 请求拦截
axios.interceptors.request.use(async config => {
    console.log("请求的数据:", config);
    if (localStorage.Authorization) {
        config.headers.Authorization =  localStorage.getItem("Authorization");
      } 
      
    //  在请求头部添加token
    // config.headers.Authorization = `Bearer ${token}`
    return config;
})
// 响应拦截
axios.interceptors.response.use(response => {
    if(response.status === 200){
        console.log("返回的数据", response);
    }
    return response.data
}, error => {
    if(error.response.status === 401 || error.data.code === 5){
        // // // 如果是token过期，跳转至登录
        // Message.error("登录已过期，请重新登录！");
        // router.replace({
        //     path: '/backgroundLogin'
        // })
        // localStorage.removeItem('Authorization') // 移除token，跳转至登录
        
        MessageBox('登录已过期，请重新登录！', {
            confirmButtonText: '确定',
            showClose: false,
            showCancelButton: false,
            // closeOnClickModal: false,
            type: 'error',
            center:true
          }).then(() => {
            localStorage.removeItem('Authorization') // 移除token，跳转至登录
            router.replace({path: '/backgroundLogin'});//返回登录页
          })

    }
    return Promise.reject(error)
});

在main.js文件中引入

import './utils/axios'

2.使用store将token保存到本地，token的名称改成自己的

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        // 存储token
        Authorization: localStorage.getItem("Authorization")
            ? localStorage.getItem("Authorization")
            : "",
        
    },
    getters: {
    },
    mutations: {
    // 修改token，并将token存入localStorage
    changeLogin(state, user) {
        state.Authorization = user.Authorization;
        localStorage.setItem("Authorization", user.Authorization);
        // console.log(state.Authorization,'state.Authorization');
      },
    },
    actions: {
    },
    modules: {
    }
})

//login文件夹
 ...mapMutations(['changeLogin'])
let userToken = data; //res后端返回的token 
            
// 将用户token保存到vuex中
this.changeLogin({ Authorization: userToken });

3.proxy代理

module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭语法书写规范的检查
  lintOnSave: false,
  // devServer
  devServer: {
    // host: 'localhost',
    port: 9000,
    open: true,
    // secure: true, // false为http访问，true为https访问
    proxy: {
        "/api": {
            target: "",   //匹配访问路径中含有'/api'的路径,替换之后真正发送请求的路径为https://api.apiopen.top/api/getHaoKanVideo?page=0&size=2，只是找到路径为前缀为"/api"的路径，只是将请求将路径替换掉，并不会去掉"/api"
            //切换代理是否切换域
            changeOrigin: true,
            //路由修改了，但是服务器接收请求的路径我们无权修改，所以在真正发送请求的时候要把这个路由再去掉
            // pathRewrite: {
            // //     //正则匹配到的内容替换为空
            //     "^/api": "/api"
            // }
        }
    }
  }
})

4.post

const {code,message,data} = await this.axios.post('/api/login',{loginName:this.ruleForm.loginName,password:this.ruleForm.password})

put

//  Vue向后端传数据后端接收为null问题解决：前端传递给后端参数必须一致
const {code,data,message} = await this.axios.put(`/api/company/${this.editCompany.id}`,this.editCompany)

get

const {code,data} = await this.axios.get('/api/bidding/vice',{params:{sysBiddingId:this.binddingInfoMsgId}})

detele

const { code, message } = await this.axios.delete(
						`/api/bidding/${id}`
					)