//捕获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. Bean的一生(Bean的生命周期)

    1. 什么是Bean? Bean是spring中组成应用程序的主体及由spring IoC容器所管理的对象(IoC容器初始化.装配及管理的对象).如果把spring比作一座大型工厂,那么bean就是该 ...

  2. node中glob模块总结

    参考文章:   githup_glob    node-glob学习 前言: 最近在学习webpack配置, 其中有一项glob配置入口文件, 来获取对应的文件名, 达到入口entry和output文 ...

  3. webUploader大文件断点续传学习心得 多文件

    二.Jsp代码: <!-- 断点续传   start--> <!-- 隐藏域 实时保存上传进度 --> <input id="jindutiao" t ...

  4. 排序算法-快速排序(Java)

    package com.rao.sort; import java.util.Arrays; /** * @author Srao * @className QuickSort * @date 201 ...

  5. Directory traversal

    Find the hidden section of the photo galery. 找到相册的隐藏部分. 直接能够目录遍历: 虽然galerie禁止访问,但是密码就在里面----直接爆破或者爬虫 ...

  6. Scrapy笔记09- 部署

    Scrapy笔记09- 部署 本篇主要介绍两种部署爬虫的方案.如果仅仅在开发调试的时候在本地部署跑起来是很容易的,不过要是生产环境,爬虫任务量大,并且持续时间长,那么还是建议使用专业的部署方法.主要是 ...

  7. 前端js判空处理,js字符串判空,js数组判空

    1.字符串 在 js 中,字符串为空会有这么几种形式,"",null,undefined,如果在已知变量为空串的情况下可以直接采用 if (string.length == 0) ...

  8. 提高 Visualforce 页面加载效率的小知识

    一般原则 在设计页面时,我们要将页面的功能降至最少,不要包含多余的功能和数据,以最大化提高运行效率 如果需要开发的功能可以通过 Salesforce 的标准功能实现,那么尽量使用标准功能,比如 工作流 ...

  9. manjaro 安装 tim 后无法输入中文

    cd /opt/deepinwine/tools sudo chmod 777 run.sh vim run.sh 在一开始的注释下输入 export GTK_IM_MODULE="fcit ...

  10. Shell里的特殊符号

    Shell里的特殊符号: (1)单引号: 由单引号括起来的符号都作为普通字符处理,他们都失去了特殊意义. (2)双引号: 除美元符号($).倒引号.反斜线(\)仍保留特殊含义外,其余符号都作为普通字符 ...