vue再请求头加token
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的更多相关文章
- ajax请求头加Token时发生的跨域(CORS)请求问题
首先描述下问题:需求是在请求头中加入token,我在ajax请求数据时添加了请求头‘Authorization’字段,并添加了响应的token值,在请求数据的时候浏览器报错如下: Request he ...
- vue全局设置请求头 (封装axios请求)
Vue.http.interceptors.push((request, next) => { // 请求发送前的处理逻辑 request.headers.set('Authorization' ...
- vue+axios请求头封装
import { mapMutations } from 'vuex' import axios from 'axios' import { Toast } from 'mint-ui'; impor ...
- axios拦截器请求头携带token
转—— https://github.com/superman66/vue-axios-github/blob/master/src/http.js
- 给HttpClient添加请求头(HttpClientFactory)
前言 在微服务的大环境下,会出现这个服务调用这个接口,那个接口的情况.假设出了问题,需要排查的时候,我们要怎么关联不同服务之间的调用情况呢?换句话就是说,这个请求的结果不对,看看是那里出了问题. 最简 ...
- $.ajax应用之请求头headers
昨天项目中,由于要请求token验证,后台给出的方案是采用请求头返回token数据,给出的API文档是这样的 由于之前一直都是采用请求体发送请求,服务器在应答体李返回数据.和这个不一样: 采用jq的$ ...
- vue+vue-resource设置请求头(带上token)
前言 有这样的一个需求,后台服务器要求把token放在请求头里面 嗯一般是通过data里面通过参数带过去的 第一种方法 全局改变: Vue.http.headers.common['token'] = ...
- vue开发之跨域请求,请求头not allowed by Access-Control-Allow-Headers,后端cookie session值取不到(二)
原因:你本地的请求ajax的get和post请求:如果你的请求头内放一些可用验证数据Token的时候就会存在跨域请求这是浏览器所不允许的问题: 方案一:后台的接口请求模式都写成jsonp请求,前端去调 ...
- 02 . 处理axios的三个问题 :设置基路径/axios挂载到vue原型/请求时自动携带token
//使用API时必须在请求头中使用 Authorization 字段提供 token 令牌 import axios from 'axios' // 处理axios的三个问题 // 处理一:基路径 a ...
- vue项目中请求头为applicationx-www-form-urlencoded的参数传递
当请求接口的请求头如下图所示时, 前端在传参时需要先新建一个URLSearchParams对象,然后将参数append到这个对象中 const params = new URLSearchParams ...
随机推荐
- unity002
物体轴心点变换 轴向变换 预览 暂停 逐帧播放 坐标 世界坐标 物体坐标 mesh 网格决定形状 渲染
- chatgpt
openAI 需要外国手机验证可以使用 当时注册的时候怎么都不成功,后来换了一个浏览器,还是怎么也不行,后再不知怎的就好了 还需要FQ,我用的是日本的线路
- vivado2018.2封装普通IP模块
将代码打包为一个IP模块 以FIFO代码为例:https://www.cnblogs.com/waqdgstd/p/15267726.html 1.打开向导 2.源文件和外围接口选择,这里不选AXI4 ...
- 实践:腾讯云COS备份本地数据以及异地备份
在当前大数据时代背景下,数据在业务中占有不可低估的地位,数据备份已然成为了最后一道屏障. 腾讯云对象存储COS,提供数据备份.共享.大数据处理.线上数据托管一站式解决方案,成为了不少企业和个人用户备份 ...
- windows shell
屏蔽wifi名称:netsh wlan add filter permission=block ssid="wifi的名称" networktype=infrastructure ...
- [BOM]实现页面loading效果,在图片资源加载完之前显示loading
使用到jquery. 判断整个页面是否加载完: // 这是根据js判断,页面加载完毕就显示 window.onload = function () { // console.log('load com ...
- express的使用:路由、中间件(二)
13.路由 1.express中的路由指客户端的请求与服务器处理函数间的映射关系 2.express中的路由由请求的类型,请求的URL地址,处理函数组成 3.app.METHOD(PATH,HANDL ...
- 力扣:面试题58 - II. 左旋转字符串
菜鸡小白不禁感叹:C++真好用!!! 题目描述: 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部.请定义一个函数实现字符串左旋转操作的功能.比如,输入字符串"abcdefg& ...
- 基于 Docker 安装 Nginx 搭建静态服务器
最近一直在准备家里的服务器部署一个自己用的网站玩玩,一来是用来学习部署的基础知识,二来,后面有空学点前端,可以部署到自己网站玩玩. 参考链接:https://juejin.cn/post/705740 ...
- 1903021126 申文骏 Java 第六周作业 类与对象
项目 内容 课程班级博客链接 19级信计班(本) 作业要求链接 第六周作业 博客名称 1903021126 申文骏 Java 第六周作业 类与对象 要求 每道题要有题目,代码(使用插入代码,不会 ...