//捕获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的更多相关文章

  1. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  2. 交互-通过axios拦截器添加token认证

    通过axios拦截器添加token认证 一.通过axios请求拦截器添加token,保证拥有获取数据的权限 通常访问接口需要相关权限,通常是需要携带token如下所示 那如何在请求头中添加token? ...

  3. bootstrapValidator关于js,jquery动态赋值不触发验证(不能捕获“程序赋值事件”)解决办法

    //触发oninput事件 //propertychange 兼容ie678 $('#captainName').on('input propertychange', function() { }); ...

  4. axios拦截器搭配token使用

    在了解到cookie.session.token的作用后学习token的使用 cookie是随着url将参数发送到后台,安全性最低,并且大小受限,不超过4kb左右,它的数据保存在客户端 session ...

  5. nodejs 服务器模拟异常状态码429,以及前端vue axios捕获状态码

    nodejs 服务端发送429状态: extendInfo (req, res) { res.status(429).json('Too many requests, please try again ...

  6. 使用Vuex来处理Authentication token

    https://www.cnblogs.com/chentianwei/p/10156459.html 之前博客:建立了一个app.使用loacal storage 来管理tokens(通过clien ...

  7. token回话保持,axios请求拦截和导航守卫以及token过期处理

    1:了解token:有时候大家又说token令牌.整个机制是前端第一次登陆发送请求,后端会根据前端的用户名和密码, 通过一些列的算法的到一个token令牌, 这个令牌是独一无二的,前端每次发送请求都需 ...

  8. axios 拦截 , 页面跳转, token 验证

    第一步: 路由 多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, / ...

  9. axios 拦截 , 页面跳转, token 验证(自己摸索了一天搞出来的)

    最近做项目,需要登录拦截,验证.于是使用了axios的拦截器(也是第一次使用,摸索了1天,终于搞出来了,真是太高兴啦!!!),废话不多说,直接上代码, 项目结构:vue-cli + webpack + ...

随机推荐

  1. spring boot缓存excel临时文件后再操作

    1. 引入poi的两个依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi ...

  2. TCP链接异常断开后,对端仍然ESTABLISH

    双方建立TCP链接,其中一方拔掉网线,另一端依然是ESTABLISHED,那么要过多长时间才会发觉链接被断开了呢? [root@node1 ~]# sysctl -a |grep keepalive ...

  3. 【Spring Boot】Spring Boot之使用AOP实现数据库多数据源自动切换

    一.添加maven坐标 <!-- aop --> <dependency> <groupId>org.springframework.boot</groupI ...

  4. ansible自动化运维04

    ansible playbook ansible-playbook命令格式: ansible-playbook  [option]  filename(剧本名字) ansible-playbook 命 ...

  5. Spring Boot Admin 2.1.0

    原文:https://blog.csdn.net/forezp/article/details/86105850 Spring Boot Admin简介 Spring Boot Admin是一个开源社 ...

  6. C++负数类型转换,-1对256取模

    最近在读C++ primer的时候,发现p32上写道:当我们赋给无符号类型一个超出它表示范围的值时,结果是初始值对无符号类型表示数值总数取模后的余数.因此,把-1赋值给8比特大小的unsigned c ...

  7. Kth Minimum Clique(2019年牛客多校第二场D题+k小团+bitset)

    目录 题目链接 题意 思路 代码 题目链接 传送门 题意 找第\(k\)小团. 思路 用\(bitset\)来标记每个结点与哪些结点直接有边,然后进行\(bfs\),在判断新加入的点与现在有的点是否都 ...

  8. Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'com.qingmu.mybaitsplus.mapper.UserMapper' available:

    java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...

  9. [PHP] Layui + jquery 实现 实用的文章自定义标签

    先看实现效果: html 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" ...

  10. python3 mqtt 添加用户名以及密码

    import paho.mqtt.client as mqtt client = mqtt.Client(client_id, transport='tcp') client.username_pw_ ...