Vue设置token拦截以及给每个api加上Authorization请求头
时间:2020-05-20
本文章向大家介绍Vue设置token拦截以及给每个api加上Authorization请求头,主要包括Vue设置token拦截以及给每个api加上Authorization请求头使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
登录页面的代码 Login.vue
关键代码为第36行
this.$store.commit("set_token", response.data.data);
set_token是store/index.js中mutations里的函数名
1 <template> 2 <div> 3 <el-form :model="user"> 4 <el-form-item label="用户名" :label-width="formLabelWidth"> 5 <el-input v-model="user.name" autocomplete="off"/> 6 </el-form-item> 7 <el-form-item label="密码" :label-width="formLabelWidth"> 8 <el-input v-model="user.password" type="password" autocomplete="off"/> 9 </el-form-item> 10 <el-button type="primary" round @click="login">登录</el-button> 11 <el-button type="warning" round @click="reset">重置</el-button> 12 </el-form> 13 </div> 14 </template> 15 16 <script> 17 export default { 18 name: "Login", 19 data() { 20 return { 21 user: { 22 name: '', 23 password: '' 24 }, 25 formLabelWidth: '60px', 26 } 27 }, 28 methods: { 29 login(){ 30 axios.post('http://localhost:8080/JwtTest_war_exploded/customer/login2', this.user) 31 .then(response => { 32 // console.log(response.data); 33 if(response.data.code === 200){ 34 this.$store.commit("set_token", response.data.data); 35 this.$router.push("/home"); 36 }else { 37 console.log(response.data.msg); 38 } 39 }) 40 }, 41 reset(){ 42 this.user.name = ''; 43 this.user.password = ''; 44 } 45 } 46 } 47 </script> 48 49 <style scoped> 50 51 </style>
接下来store里面的代码如下:
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 4 Vue.use(Vuex) 5 6 export default new Vuex.Store({ 7 state: { 8 token: '' 9 }, 10 mutations: { 11 set_token(state, token){ 12 state.token = token; 13 sessionStorage.token = token 14 } 15 16 }, 17 actions: { 18 }, 19 modules: { 20 } 21 })
router/index.js里面增加以下代码:
1 if (sessionStorage.getItem("token")){ 2 store.commit("set_token", sessionStorage.getItem("token")) 3 }
最后在main.js里增加axios的请求和响应拦截器
1 // 添加请求拦截器 2 axios.interceptors.request.use(function (config) { 3 // 在发送请求之前做些什么 4 // 判断是否存在token,如果存在将每个页面header添加token 5 if (store.state.token) { 6 config.headers.common['Authorization'] = "Bearer " + store.state.token 7 } 8 return config 9 }, function (error) { 10 router.push('/login') 11 return Promise.reject(error) 12 }) 13 // 添加响应拦截器 14 axios.interceptors.response.use(function (response) { 15 // 对响应数据做点什么 16 return response 17 }, function (error) { 18 // 对响应错误做点什么 19 if (error.response) { 20 switch (error.response.status) { 21 case 401: 22 store.commit('del_token') 23 router.push('/login') 24 } 25 } 26 return Promise.reject(error) 27 })
原文地址:https://www.cnblogs.com/ABKing/p/12923029.html
- Comparison of Apache Stream Processing Frameworks: Part 2
- 2017 Multi-University Training Contest - Team 9 1005&&HDU 6165 FFF at Valentine【强联通缩点+拓扑排序】
- 2017 Multi-University Training Contest - Team 9 1004&&HDU 6164 Dying Light【数学+模拟】
- Python3选择排序
- 【DeepMind 公开课-深度强化学习教程代码实战01】迭代法评估4*4方格世界下的随机策略
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861C Did yo
- Codeforces Round #434 (Div. 2, based on Technocup 2018 Elimination Round 1)&&Codeforces 861B Which
- 信用卡安全问题:被用户忽视的识别码
- Python3快速排序
- Python3插入排序
- Python3冒泡排序
- Python Selenium设计模式-POM
- 【Python学习笔记之一】Python关键字及其总结
- 前后端分离了,然后呢?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux中$符号的基础用法总结
- Linux下的 mariadb 使用 root 用户启动方式(推荐)
- window与linux项目部署之linux文件路径不存在问题
- Ubuntu 18.04安装 pyenv、pyenv-virtualenv、virtualenv、Numpy、SciPy、Pillow、Matplotlib
- Linux使用 iftop 实时监控网卡的流量
- Centos中TCPWrappers访问控制实现
- CentOS7 重新分配分区大小的实现方法
- Linux 下安装pip包的方法
- Linux系统设置PATH环境变量(3种方法)
- leetcode栈之有效的括号
- linux系统安装iso文件方法
- xshell 远程登陆CentOS7 免密登陆的思路详解
- Linux服务器下Nginx与Apache共存的实现方法分析
- 浅析Linux中vsftpd服务配置(匿名,用户,虚拟用户)
- CentOS7开启MySQL8主从备份、每日定时全量备份(推荐)