首页 > 其他分享 >第五步:vue-拦截器

第五步:vue-拦截器

时间:2023-11-05 21:22:58浏览次数:41  
标签:拦截器 interceptors vue userinfo 第五步 message data

   

//interceptors:拦截器
axios.interceptors.request.use(x => {

  var userinfo = window.localStorage.getItem(config.userkey);
  if (userinfo) {
    var user = JSON.parse(userinfo);
    x.headers.Authorization = `Bearer ${user.userToken}`
  }
  return x;
})

axios.interceptors.response.use(x => {
  if (x.data.code != 200) {
    alert(`请求接口异常=>${x.data.message}`);
    // Vue.$message.error(x.data.message)
  }
  return x;
})

  

标签:拦截器,interceptors,vue,userinfo,第五步,message,data
From: https://www.cnblogs.com/gyp2001/p/17811208.html

相关文章

  • Linux脚本:批量启动docker容器、批量启动springboot、批量启动Vuejs
    批量启动springboot#!/bin/bash#检查容器是否已经启动check_container(){sudodockerps|grep"$1">/dev/nullif[$?-ne0];thenecho"$1containerisnotrunning.Starting$1..."sudodockerstart"$1"elseecho......
  • WSL 运行vue项目
    1.运行vue项目因为wsl环境的不同,使用npmrunserve运行vue项目失败,提示错误vue-cli-service未找到。经过测试,发现yarn可以顺利的运行项目。#首先安装vue所需的模块yarninstall#然后运行项目yarnserve ......
  • SortableJS:vuedraggable实现元素拖放排序
    文档:https://sortablejs.github.io/Sortable/github:https://github.com/SortableJS/SortableVue2:https://github.com/SortableJS/Vue.DraggableVue3:https://github.com/SortableJS/vue.draggable.nextnpmhttps://www.npmjs.com/package/vuedraggable#vue2npminst......
  • Vue学习笔记6:深度监视
    6.深度监视监视number.a的变化:<!--准备好一个容器--><divid="root"><h3>a的值是:{{numbers.a}}</h3><button@click="numbers.a++">点我让a+1</button></div><scripttype="text/javascript">......
  • Vue学习笔记5:监视属性
    5.监视属性在watch中通过一个配置(isHot),监视data中的isHot这个属性,以及info这个计算属性。<!--准备好一个容器--><divid="root"><h2>今天天气很{{info}}</h2><!--绑定事件的时候:@xxx="yyy"yyy可以写一些简单的语句--><!--<button@click="isHot=......
  • Vue项目使用“花生壳“制作内网穿透---->步骤
     软件下载注册登录实名认证设置映射修改vue.config.js: const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({transpileDependencies:true,devServer:{historyApiFallback:true,disableHostCheck:true,//allowedHos......
  • Vue学习笔记4: 天气案例
    4.Vue学习笔记4:天气案例<!--准备好一个容器--><divid="root"><h2>今天天气很{{info}}</h2><!--绑定事件的时候:@xxx="yyy"yyy可以写一些简单的语句--><!--<button@click="isHot=!isHot">切换天气</button>-->......
  • Vue学习笔记2:计算属性,及其简写形式
    2.计算属性,及其简写形式data中的各项就是属性。所谓计算属性,就是拿已经写好的属性去加工或计算,生成一个全新的属性。计算属性在computed里,是一个对象。对象里可以有计算属性的getter和setter,他们都是function。与Object.defineProperty方法中的getter和setter是一样的,并且计算......
  • Vue学习笔记1:Hello World小案例
    1.HelloWorld小案例1.1采用组件化模式,提高代码复用率、且让代码更好维护。1.2声明式编码,让编码人员无需直接操作DOM,提高开发效率。1.3学习Vue之前要掌握的Javascript基础知识ES6语法规范ES6模块化包管理器原型、原型链数组常用方法axiospromiseVSCode插件:Liv......
  • 在Vue 3中如何在created钩子中进行API调用?
    在Vue3中,您可以使用setup函数来替代Vue2中的created生命周期钩子,并在其中进行API调用。下面是一个示例:import{ref,onMounted}from'vue'importaxiosfrom'axios'exportdefault{setup(){//创建一个响应式变量来存储API的返回数据constdata=ref(null......