Vue中登陆超时，返回登陆页面

首先登陆时，将登陆接口返回的 token 用 localStorage 保存起来，然后在 axios 的请求拦截里将 token 添加到请求头部 header 里，作为之后前后端的通信票据

// axios 请求设置 请求拦截器
axios.interceptores.request.use(config => {var data = {}if(typeof(config.data) === 'string'){ // 如果拦截到请求中data 为 string 类型，则执行其中的代码let str = ` '${config.data}' `str = str.substring(1, str.length - 1 ) // 提取config.data字符串中第二位 ~ 最后一位之间的字符串data = JSON.parse(str) // 将提取出来的字符串，转换位 json对象} else {data = config.data}// 判断是否是登陆和注册接口，因为登陆和注册接口不需要在请求头里加 tokenvar isLoginRegiste = ['login', 'registe'].indexOf(data.methods) !== -1if(!isLoginRegiste){// 如果不是登陆和注册接口，说明用户已经登陆，然后在请求头里添加tokenconfig.headers.token = localStorage.token}// 因为 axios 版本问题， 请求拦截必须返回 config return config;
})

在axios 的响应拦截里处理，判断后端接口返回的状态码，根据状态码判断登陆是否超时，如果超时，那么跳转到登陆页面，并且需要清空浏览器的缓存：

import 'router' from 'vue-router'
import { Message } from 'element-ui'
axios.interceptors.response.use(response => {var data = response.dataif(data.code === 23001) {// 登陆超时 - 23001var msg = '登陆超时'Message({message: msg,type: 'error',duration: 3 * 1000})router.push('/login')// 清除浏览器缓存localStorage.removeItem('token')} else {// 响应正常，返回数据即可return data}
})

Vue中登陆超时，返回登陆页面相关推荐

vue中处理后台返回的 html 特殊标签(‘\lt； p style=“xxx“ \gt；‘)或(\＜p＞)的三种情况及传给后端数据的解决方案
问题一:vue中处理后台返回的 html 特殊标签('&lt: p style="xxx" &gt:')或(\<p>)的三种情况返回数据 // 返回数 ...
dede后台登陆又返回登陆界面怎么办
dede后台登陆又返回登陆界面......网上说的DATA等文件夹都有写入权限,试过好几种方法都不行! 其实最有可能的原因就是data文件夹的权限问题.大家可以通过FTP看下data文件的权限是否是7 ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...
ios 销毁当前页面重新开启_利用Vue中keep-alive，快速实现页面缓存
keep-alive 有时候我们不希望组件被重新渲染影响使用体验:或者处于性能考虑,避免多次重复渲染降低性能.而是希望组件可以缓存下来,维持当前的状态.这时候就可以用到keep-alive组件. 官网 ...
asp.net mvc cookie超时返回登录页面问题
filterContext.HttpContext.Response.Write("<script>top.location.href = '/Login/Index';< ...
时间戳处理：vue中请求接口返回的数据将时间戳转换成时间并渲染到页面
问题: 今天遇到一个问题是,请求接口,返回了很多的时间戳数据.将时间戳转换成时间.并渲染到页面上.之前有篇文章讲的是单个时间戳的转换.这次是多个数据.我有点不知所措了. 分析: 经过思考,我们可以这样 ...
vue中使用Vue-i18n插件实现页面中英文切换详细教程
1.在项目的根目录中安装插件 npm install vue-i18n 2.新建文件夹与文件存放自己配置的语言包,我这里新建的是lang文件夹 zh.js为中文语言包 en.js为英文语言包文件夹与 ...
react navigation中使用goBack返回指定页面
goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...
html控制多个音频audio css,vue中audio自定义样式（页面中包含多个audio）
前言一开始看到UI设计稿,我内心是十分抗拒的.觉得用原生audio的样式就可以了,也不是特别丑,毕竟时间给的不多,自定义样式还要改逻辑啥的.在网上搜索了一番有没有合适的插件,没有看到心动的.最后还是 ...
【转载】Callable、FutureTask中阻塞超时返回的坑点
本文转载自:http://www.cnblogs.com/starcrm/p/5010863.html 案例1: package com.net.thread.future;import java.u ...

Vue中登陆超时，返回登陆页面

Vue中登陆超时，返回登陆页面相关推荐

最新文章

热门文章