码迷,mamicode.com
首页 > 移动开发 > 详细

vueCli3 封装axios 及 配置proxy跨域

时间:2020-04-14 16:32:25      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:src   data   user   miss   reject   other   creat   path   cancel   

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

 

 

 

 

 

 

    

vueCli3 封装axios 及 配置proxy跨域

标签:src   data   user   miss   reject   other   creat   path   cancel   

原文地址:https://www.cnblogs.com/TreeCTJ/p/12698766.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!