vueCli3 封裝axios 及 配置proxy跨域

步驟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
            }
        }
    }
}