首页 > 其他分享 >vue中间件

vue中间件

时间:2022-10-31 15:33:34浏览次数:53  
标签:vue 中间件 request next token axios env

.env.development   //部署(文件名)

.env.production  //生产前(文件名)

${process.env.VUE_APP_UR}  //获取值

写一个中间件

在写前后台分离的时候肯定是需要发起各种求情,但是每个请求都要写相同的域名,这时候可以用axios定义一下

import axios from 'axios';

axios.defaults.headers.common["Content-Type"] = 'multipart/form-data'
// 设置请求路径
const request = axios.create({
    baseURL:process.env.VUE_APP_URL;
    //直接设置请求头  不好用
    header:localStroage.getItem('token');
}) 
// 使用路由拦截设置请求头
request.interceptors.request.use((req) => {
    let token = localStorage.getItem('token');
    if(token){
        req.headers.token = token;
    }
    return req
})

exoprt default request;
//main文件全局配置
import request from './request'
Vue.prototype.$http = request
this.$http.post();//调用
//导航首位
// router.beforeEach((to,from,next)=>{
//   if(to.path!="/Login"){
//     if(localStorage.getItem("name")){
//       next();
//     }else{
//       next("/Login")
//     }
//   }else{
//     next()
//   }
// })

 

标签:vue,中间件,request,next,token,axios,env
From: https://www.cnblogs.com/Lmyong/p/16844488.html

相关文章

  • Vue privide 和inject 依赖注入的用法
    from表示在可用的注入内容中搜索用的key,default当然就是默认值。 这里就是我们说的provide,向下提供信息,这里提供的是当前的vue实例,相当于给了后代一个接口。这样在任......
  • windows IIS中 vue的反向代理部署
    1、下载urlwrite,https://webpihandler.azurewebsites.net/web/handlers/webpi.ashx/getinstaller/urlrewrite2.appids2、下载ARRCache,https://webpihandler.azurewebsites......
  • VUE项目创建
    首先你的电脑安装了node.js,并进行配置vue创建一个新的项目首先cmdd:然后cd:/路径(这里是项目保存的路径)vueinitwebpack项目名vue修改端口号config的index.js第一步......
  • Vue-1
    vue​​1.认识MVVM结构​​​​2.我的第一个Vue实例​​​​3.闪烁问题​​​​4.三种赋值方式​​​​5.绑定属性v-bind:可以简写为:​​​​6.v-on:click("函数名字")触......
  • vue计算,监听属性插槽和动态组件
    计算属性如果{{函数()}},每次页面刷新,函数都会重新执行函数---》当属性来使用,缓存<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><ti......
  • Vue项目npm install下载依赖,报错:npm install 报错(npm ERR! errno -4048...(已解决✔)
    vue项目下载依赖npminstall报错:(npmERR!errno-4048,Error:EPERM:operationnotpermitted,)解决方法出现这种报错的时候有我用了清空缓存的方法:1,清理本地缓存:cach......
  • vue-axios增加操作
    <template><divclass="Insert"><labelfor="name">名称:</label><inputv-model="name"type="text"/><labelfor="location">部门:</label><inputv-mode......
  • vue基础题
    Vue2和Vue3的双向数据绑定的原理Vue2的核心就是通过Object.defineProperty()方法设置set和get函数来实现数据的劫持Vue3的核心是使用newProxy(对象,{get(),set()})方法来......
  • Vue面试题
    1、Vue的生命周期?beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed(创建、挂载、更新、卸载)挂载中可以操作DOM,创建中不......
  • vue中wahch和computed区别
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-e......