vueCli3 封装axios 及 配置proxy跨域

Posted 2020-11-27 敲代码的树先生

步骤1：首先呢，在util文件下创建一个auth.js 用来获取token 、存储token 、删除token （这里的token是存放在sessionStorage里面）

const TokenKey = \'user_token\'

export function getToken() {

    return sessionStorage.getItem(TokenKey)
}

export function setToken(token) {
    return sessionStorage.setItem(TokenKey, token)
    
}

export function removeToken() {
    return sessionStorage.remove(TokenKey)
}

 

步骤2：将axios进行一个简单的封装；在util文件夹下创建一个http.js

process.env.VUE_APP_URL 是作为baseURL的， 不知道怎么回事儿的可以看看 https://www.cnblogs.com/TreeCTJ/p/12515914.html

import axios from "axios"  //引入axios
import qs from "qs"  //这个是axios里面的模块，用于序列化参数的。 看情况使用哦
import { getToken } from "./auth"   //获取到token

//创建一个axios实例
const service = axios.create({
   baseURL: process.env.VUE_APP_URL,
   timeout:5000,
   //transformRequest 这里主要是 post请求时 请求成功了，但是后台并没 
   //有获取到前端的请求参数。如果后台是直接从请求体里取的话，请忽略
   transformRequest:[
       data => {
           let params = qs.stringify(data, {indices: false})
           return params 
       }        
   ]   
})

let token = getToken()  //获取token

// 请求拦截器
service.interceptors.request.use(
    config => {
        if(token){
            //每次请求都需要带上token去请求接口
            config.headers[\'token\'] = getToken()
        }
        return config
    },
    error => {
       return Promise.reject(error)
    }
)

//响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data
        if(res.code != 200){
            //这里主要是判断code值 等于什么，代表着token值失效 例如：50008
            if(res.code == 50008){
               MessageBox.confirm("token值失效，请重新登录",{
                  confirmButtonText: "返回登录页",
                  cancelButtonText: "取消",
                  type: "warning"
               }).then(() => {
                //退回到登录页 需要将sessionStorage里面的值给清空掉
                sessionStorage.clear() 
               })
           }
          return res
        }else{
          return res
        }
    },
    error => {
       return Promise.reject(error)
   }
)

export default service



            

 

步骤3：src文件夹下创建一个api文件夹 专门用来存放 请求接口的  例如api文件夹下创建了一个  user.js

import request from \'@/util/http\'
//接口文件呢，post请求参数名为data，get请求参数名为params
export function login(data) {
    return request({
        url: \'/system/login/login\',
        method: \'post\',
        data
    })
}

export function loginOut(params) {
    return request({
        url: \'/system/login/exit\',
        method: \'get\',
        params

    })
}

 

步骤4：做一个简单的路由拦截，在src文件夹下创建一个 permission.js    ，最后到main.js 中引入    import \'@/permission\'

import router from \'./router\'
import { getToken } from \'./util/auth\'
const whiteList = [\'/login\'] // no redirect whitelist

router.beforeEach(async (to, from, next) => {

  // determine whether the user has logged in 确认用户是否已经登录了
  const hasToken = getToken()
  if (hasToken) {
    if (to.path === \'/login\') {
      // if is logged in, redirect to the home page 如果登录了就跳转到下面这个地址
      next({ 
        path: \'/project/list\'
      })
    } else {
      if (hasToken) {
        next()
      } else {
        try {
          next()
        } catch (error) {
          // remove token and go to login page to re-login 删除token，重新登录
          Message.error(error || \'Has Error\')
          next(`/login?redirect=${to.path}`)
        }
      }
    }
  } else {
    /* has no token*/

    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly  不需要登录就可以进入的页面 
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.  没有访问权限的其他页面被重定向到登录页面。
      // next(`/login?redirect=${to.path}`)
      next(`/login`)
    }
  }
})

 

以上 就是一个简单的axios请求封装以及一个简单的路由拦截

 

proxy解决前端跨域问题

在vue.config.js 文件中 设置 即可

module.exports = {
    devServer: {
        proxy: {
            "/system": {
                target: "http://www.baidu.com",
                changOrigin: true
            },
            "/project": {
                target: "http://www.baidu.com",
                changOrigin: true
            },
            "/facility": {
                target: "http://www.baidu.com",
                changOrigin: true
            },
            "/log": {
                target: "http://www.baidu.com",
                changOrigin: true
            },
            "/fileHandle": {
                target: "http://www.baidu.com",
                changOrigin: true
            }
        }
    }
}