token 过期实例

这几天项目提测，测试给我提了个bug，说token过期，路由应该自动跳转到登陆页面，让用户重新登录。先说下一些前置条件，
1：我公司的token时效在生产环境设置为一个小时，当token过期，所有接口都直接返回
2：每次路由跳转都会对token进行判断，设置了一个全局的beforeEach钩子函数，如果token存在就跳到你所需要的页面，否则就直接跳转到登录页面，让用户登录重新存取token

接口返回的信息
{code:10009,msg:'token过期',data:null
}
全局的路由钩子函数
router.beforeEach(async(to, from, next) => {
//获取token// determine whether the user has logged inconst hasToken = getToken()if (hasToken) {//token存在，如果当前跳转的路由是登录界面if (to.path === '/login') {// if is logged in, redirect to the home pagenext({ path: '/' })NProgress.done()} else {//在这里，就拉去用户权限，判断用户是否有权限访问这个路由} catch (error) {// remove token and go to login page to re-loginawait store.dispatch('user/resetToken')Message.error(error || 'Has Error')next(`/login?redirect=${to.path}`)NProgress.done()}} else {//token不存在if (whiteList.indexOf(to.path) !== -1) {//如果要跳转的路由在白名单里，则跳转过去next()} else {//否则跳转到登录页面next(`/login?redirect=${to.path}`)NProgress.done()}}
})

所以我直接在对所有的请求进行拦截，当响应的数据返回的code是10009，就直接清空用户信息，重新加载页面。我对代码简化了下，因为用户在登录时就会把token，name以及权限信息存在store/user.js文件里，所以只要token过期，把user文件的信息清空。这样，在token过期后，刷新页面或者跳转组件时，都会调用全局的beforeEach判断，当token信息不存在就会直接跳转到登录页面

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, timeout: 5000
})
//发送请求时把token携带过去
service.interceptors.request.use(config => {if (store.getters.token) {config.headers['sg-token'] = getToken()}return config},error => {console.log(error)return Promise.reject(error)}
)service.interceptors.response.use(response => {console.log(response.data)const res = response.data// token过期，重返登录界面if (res.code === 10009) {store.dispatch('user/logout').then(() => {location.reload(true)})}return res},error => {console.log('err' + error) // for debugMessage({message: error.msg,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

好啦，关于token的分享就到这里了，以上代码根据你们项目的情况换成你们的数据，有错误欢迎指出来！

token 过期实例相关推荐

vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档安装 npm install axios npm install es ...
使用RxJava的retryWhen操作符实现token过期自动刷新
1.问题描述我们的项目中请求与登录相关接口时需要带上sessionId这个参数,当发现token过期的时候就需要走刷新token的接口,获取最新的token,然后再重新进行请求. 如果项目中是用Ok ...
用vuex对token/refresh_token 进行管理以及处理token过期问题
这里介绍对token的处理问题1:token数据或者其他数据,存在vuex仓库中,刷新会丢失状态 . 问题2:数据只存在本地,数据变化了,相关的视图并不会更新. Vuex 容器中的数据只是为了方便在 ...
token过期?页面如何实现无感刷新?
我们为什么要无感刷新呢? 我们都知道,后台返回的token是有时效性的,时间到了,你在交互后台的时候,后台会判断你的token是否过期(安全需要),如果过期了就会通过邪恶的手段逼迫你重新登陆! 无感刷 ...
Spark与hdfs delegation token过期的排查思路总结
背景 hadoop delegation token的问题相对比较混乱和复杂,简单说下这东西的出现背景,最早的hadoop的因没有的完善的安全机制(安全机制主要包括:认证 + 鉴权,hadoop这里主 ...
vue实际运用六：处理token过期
vue实际运用六:处理token过期 1. 后端为了安全,token一般存在有效时间,当token过期,所有请求失效解决方案: 1)在请求发起前拦截每个请求,判断token的有效时间是否已经过期,若 ...
vue实际运用：处理token过期
后端为了安全,token一般存在有效时间,当token过期,所有请求失效 1. 解决方案: 1)在请求发起前拦截每个请求,判断token的有效时间是否已经过期,若已过期,则将请求挂起,先刷新token ...
hdfs delegation token 过期问题分析
什么是delegation token delegation token其实就是hadoop里一种轻量级认证方法,作为kerberos认证的一种补充.理论上只使用kerberos来认证是足够了,为什么 ...
vue token过期后自动刷新token
在系统登录后,后端返回一个token,和refreshToken.每次接口请求的时候都会携带这个token,但是这个token一般是有过期时间的,假设过期时间为半小时,你半小时内没有调接口.半小时后你 ...

token 过期实例

token 过期实例相关推荐

最新文章

热门文章