axios捕获401 赋值token
//捕获401
// http request 拦截器
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
// console.log(token)
config.headers.Authorization = token
}
return config;
},
err => {
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
}
}
return Promise.reject(error.response.data) // 返回接口返回的错误信息
});
login.vue
localStorage.setItem('token', "Bearer " + res.data.data.Token)
axios捕获401 赋值token的更多相关文章
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- 交互-通过axios拦截器添加token认证
通过axios拦截器添加token认证 一.通过axios请求拦截器添加token,保证拥有获取数据的权限 通常访问接口需要相关权限,通常是需要携带token如下所示 那如何在请求头中添加token? ...
- bootstrapValidator关于js,jquery动态赋值不触发验证(不能捕获“程序赋值事件”)解决办法
//触发oninput事件 //propertychange 兼容ie678 $('#captainName').on('input propertychange', function() { }); ...
- axios拦截器搭配token使用
在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...
- nodejs 服务器模拟异常状态码429,以及前端vue axios捕获状态码
nodejs 服务端发送429状态: extendInfo (req, res) { res.status(429).json('Too many requests, please try again ...
- 使用Vuex来处理Authentication token
https://www.cnblogs.com/chentianwei/p/10156459.html 之前博客:建立了一个app.使用loacal storage 来管理tokens(通过clien ...
- token回话保持,axios请求拦截和导航守卫以及token过期处理
1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...
- axios 拦截 , 页面跳转, token 验证
第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, / ...
- axios 拦截 , 页面跳转, token 验证(自己摸索了一天搞出来的)
最近做项目,需要登录拦截,验证.于是使用了axios的拦截器(也是第一次使用,摸索了1天,终于搞出来了,真是太高兴啦!!!),废话不多说,直接上代码, 项目结构:vue-cli + webpack + ...
随机推荐
- sql学习(一),sqlpuls
原创作品,转载请注明来源https://www.cnblogs.com/sogeisetsu/ oracle的特殊语法 注意,上方的语法只适用于oracle,并不适用于mysql,比如,mysql需要 ...
- Nat类型测试
这是一个测试NAT类型的小工具,一般也没太多用处,只有游戏玩家可能需要用来测试你的网络NAT类型是什么.NAT类型一般分为以下4种: 1. Full Cone NAT (完全圆锥型)2. Restri ...
- css之单行缩略..以及多行缩略
html单行缩略方法 .oneline { white-space: nowrap; //强制文本在一行内输出 overflow: hidden; //隐藏溢出部分 text-overflow: el ...
- 常见bug类别
- phpcms添加https后台分页错误的解决方法
今天修改一位客户的phpcms网站,他要求添加https,这对ytkah来说是轻车熟路了,但是后台稍微有点问题,点击分页出现错误,将鼠标移到下一页显示的链接是https://www.abc.com/w ...
- [冬令营Day1 T2]sequence
题目描述 Description 给一个长度为N的序列以及Q的询问,每次两个参数l,r,问你序列[l,r]中的最大连续和 输入描述 Input Description 一行二个正整数N,Q. 接下来一 ...
- no applicable action for [springProfile], current ElementPath is [[configuration][springProfile]]
今天down了一个开源项目,启动后一直存在如下错误信息: ERROR in ch.qos.logback.core.joran.spi.Interpreter@26:42 - no applicabl ...
- ESA2GJK1DH1K基础篇: STM32+Wi-Fi(AT指令版)实现MQTT源码讲解
前言 注: 本程序发送心跳包,发送温湿度,返回控制数据这三个发送是单独的,有可能凑到一起发. 由于本身程序就是复杂性的程序,所以这节程序没有使用中断发送,没有使用环形队列发送,为了避免多条消息可能凑到 ...
- 三天精通Vue--学前摘要
Vue Vue是一个前端框架,中文学习教程https://cn.vuejs.org/v2/guide/components.html 学习的前提:一点的 HTML+CSS+js node.js是前端的 ...
- leetcode-19:给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点。
/** * Definition for singly-linked list. * public class ListNode { * int val; * ListNode next; * Lis ...