//捕获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. A simple introduction to Three kinds of Delegation of Kerberos

    1.What is Delegation? Just like the name. Delegation is that a server pretend to behalf of a user an ...

  2. 部署LNMP应用平台

    一.LNMP应用平台概述 1.概述:LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构.Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/ ...

  3. Alipay SDK验签PHP低于5.5版本错误

    低于PHP5.5版本不支持OPENSSL_ALGO_SHA256函数,要想使用RSA2加密,把OPENSSL_ALGO_SHA256函数替换为:sha256WithRSAEncryption 解密方法 ...

  4. Eric6安装问题解决

    按照http://eric-ide.python-projects.org/eric-download.html中的说明,执行命令:python install.py 却遇到下面的问题: Compil ...

  5. application platform as a service (aPaaS)

    Application platform as a service (aPaaS) is a cloud service that provides environments for the deve ...

  6. CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

    CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...

  7. About Her

    突然想给黑寡妇写点儿东西......(也许很多都不是我写的,但是能表达我的心意) 1. 众人进量子领域前最后一句话是她笑着说"一分钟后见." 而最终没有回来的,只有她自己一个 2. ...

  8. 从零和使用mxnet实现线性回归

    1.线性回归从零实现 from mxnet import ndarray as nd import matplotlib.pyplot as plt import numpy as np import ...

  9. Hotspot的栈

    各种类型的线程他们所需要的栈的大小其实是可以通过不同的参数来控制的: java_thread的stack_size,其实就是-Xss或者-XX:ThreadStackSize的值 compiler_t ...

  10. java基础 类 & 继承

    类 在Java中,类文件是以.java为后缀的代码文件,在每个类文件中可以有多个类,但是最多只允许出现一个public类,当有public类的时候,类文件的名称必须和public类的名称相同,若不存在 ...