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