Vue:全局拦截所有请求,并在请求头中添加token - 道祖且长 - 博客园 (cnblogs.com)

util.js

export function sessionSet(user){
let jsonStr=JSON.stringify(user);
sessionStorage.setItem("user",jsonStr);
}
export function sessionGet(){
let jsonStr=sessionStorage.getItem("user");
let user=JSON.parse(jsonStr);
return user;
}
// token设置
export function tokenSet(token){
let jsonStr=JSON.stringify(token);
sessionStorage.setItem("token",jsonStr);
}
// token获取
export function tokenGet(){
let jsonStr=sessionStorage.getItem("token");
let token=JSON.parse(jsonStr);
return token;
}
export function sessionDestroy(){
sessionStorage.setItem("user",null);
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import qs from 'qs'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import './assets/default.css'
import Message from 'element-ui'; import {
sessionSet,
sessionGet,
sessionDestroy,
tokenSet,
tokenGet,
} from './util.js' Vue.use(ElementUI); Vue.config.productionTip = false //设置axios的基础url部分
axios.defaults.baseURL = "xxx"; // 把axios请求对象挂载到vue.prototype原型对象中,在组件中通过this.xxx直接访问
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;
Vue.prototype.$sessionSet = sessionSet;
Vue.prototype.$sessionGet = sessionGet;
Vue.prototype.$sessionDestroy = sessionDestroy;
Vue.prototype.$tokenSet = tokenSet;
Vue.prototype.$tokenGet = tokenGet;
Vue.prototype.$msg = Message; // 添加请求拦截器
axios.interceptors.request.use(function(config) {
console.log(config)
// 在发送请求之前做些什么
// 判断是否存在token,如果存在将每个页面header添加token
if (this.tokenGet()) {
// 排除一些链接加token(除了网上的业务,线下业务不加token)
if (config.url == '/xxx/xxx') {
return config;
} else {
config.headers.Authorization = this.tokenGet();
}
}
return config;
}, function(error) {
router.push('/')
return Promise.reject(error)
}) new Vue({
router,
render: h => h(App)
}).$mount('#app')

vue再请求头加token的更多相关文章

  1. ajax请求头加Token时发生的跨域(CORS)请求问题

    首先描述下问题:需求是在请求头中加入token,我在ajax请求数据时添加了请求头‘Authorization’字段,并添加了响应的token值,在请求数据的时候浏览器报错如下: Request he ...

  2. vue全局设置请求头 (封装axios请求)

    Vue.http.interceptors.push((request, next) => { // 请求发送前的处理逻辑 request.headers.set('Authorization' ...

  3. vue+axios请求头封装

    import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...

  4. axios拦截器请求头携带token

    转—— https://github.com/superman66/vue-axios-github/blob/master/src/http.js

  5. 给HttpClient添加请求头(HttpClientFactory)

    前言 在微服务的大环境下,会出现这个服务调用这个接口,那个接口的情况.假设出了问题,需要排查的时候,我们要怎么关联不同服务之间的调用情况呢?换句话就是说,这个请求的结果不对,看看是那里出了问题. 最简 ...

  6. $.ajax应用之请求头headers

    昨天项目中,由于要请求token验证,后台给出的方案是采用请求头返回token数据,给出的API文档是这样的 由于之前一直都是采用请求体发送请求,服务器在应答体李返回数据.和这个不一样: 采用jq的$ ...

  7. vue+vue-resource设置请求头(带上token)

    前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...

  8. vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)

    原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...

  9. 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token

    //使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...

  10. vue项目中请求头为applicationx-www-form-urlencoded的参数传递

    当请求接口的请求头如下图所示时, 前端在传参时需要先新建一个URLSearchParams对象,然后将参数append到这个对象中 const params = new URLSearchParams ...

随机推荐

  1. 权昌TSC条码打印机终极使用教程与开发版本代码大全

    本教程使用的打印机型号:TSC TTP-244 Plus 官方文档 一.TSC打印机安装 1.机器安装 根据官方快速安装指南安装打印机,此处不详细说明,也可以看视频教程,唯一需要注意的地方就是碳带的方 ...

  2. css布局、动画要点

    background属性 属性解释background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设 ...

  3. MySQL之中文数据问题

    随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...

  4. c语言学习---gets()读取字符串,以及\0,fgets()put()fputs()

    #include<stdio.h> //gets()读取字符串, 可以读取空格 int main() { char num[2] = "";//gets 也会造成内存污 ...

  5. TypeScript - 继承(extends) - 抽象类(abstract)

    (function () { /** * abstract 开头的是抽象类, * 抽象类和其他区别不大,只是不能用来创建对象 * 抽象类专门是让别人继承的的类 */ abstract class An ...

  6. 如何用calibredrv 来merge多个cell的gds

    1. 两个cell合并到一个gds calibredrv -shell layout filemerge -in A.gds -in B.gds -out  AB.gds -createtop AB_ ...

  7. 在 MAC 上 进行 iOS 的 Airtest 自动化测试(未完成)

    1. 用USB连接 iPhone 和 mac . 从 连接 https://github.com/AirtestProject/IOS-Tagent 下载iOS-Targent工程文件, 在左上角选择 ...

  8. Tomcat9启动闪退或者在windows服务中启动异常以及启动日志乱码问题

    首先虽然jdk6以后不需要在环境变量中额外配置jre了,但是我在tomcat的bin下startup.bat时启动时发现 可见用到了JRE_HOME,所以你需要去额外配置一下,否则会出现另外一种错误, ...

  9. 2022-07-09 第一小组 张明旭 前端HTML学习记录

    今天是正式学习的第一天,第一次接触前端内容,蒙了一圈又一圈,老师讲课速度是1000圈/s!!!!!!(插一句老师的打字和打代码速度起飞!) 好在有视频回放而且跟了笔记,能复习n遍.加油!!! 主要学习 ...

  10. mysql之字段约束-第五篇

    数据库的完整性约束是为了在数据库应用中保证数据的一致性和正确性.所以在创建数据表时定义其字段的约束是非常有必要的. 主键约束 主键(primary key)是一个列或者列的组合,其值能唯一地标识表中的 ...