码迷,mamicode.com
首页 > 其他好文 > 详细

vue之登录和token处理

时间:2018-10-24 20:03:03      阅读:562      评论:0      收藏:0      [点我收藏+]

标签:token   headers   场景   lse   config   strong   pat   post   imp   

应用场景一

Vue刷新token,判断token是否过期、失效,进行登录判断跟token值存储

刷新token和token是否过期的操作都是由后端实现,前端只负责根据code的不同状态来做不同的操作:可以跟后端讨论不同的状态对应不同的情况来进行处理

具体实现

/**
* 全局变量 和 设置 、配置等。。。
*/
 
import axios from axios // 引入axios
 
import Storage from @/assets/js/util/storage.js // storage工具类,简单的封装
 
 
 
axios.defaults.headers.post[Content-Type] = application/x-www-form-urlencoded
 
 
 
/* 请求拦截器 */
 
axios.interceptors.request.use(function (config) { // 每次请求时会从localStorage中获取token
 
    let token = Storage.localGet(token)
 
    if (token) {
    
        token = bearer +   + token.replace(/|"/g, ‘‘) // 把token加入到默认请求参数中
 
        config.headers.common[Authorization] = token
 
    }
 
    return config
 
}, function (error) {
 
    return Promise.reject(error)
 
})
 
/* 响应拦截器 */
 
axios.interceptors.response.use(function (response) { // ①10010 token过期(30天) ②10011 token无效
 
if (response.data.code === 10010 || response.data.code === 10011) {
 
    Storage.localRemove(token) // 删除已经失效或过期的token(不删除也可以,因为登录后覆盖)
 
    router.replace({
 
        path: /login // 到登录页重新获取token
 
    })
 
} else if (response.data.token) { // 判断token是否存在,如果存在说明需要更新token
 
    Storage.localSet(token, response.data.token) // 覆盖原来的token(默认一天刷新一次)
 
}
 
    return response
 
}, function (error) {
 
    return Promise.reject(error)
 
})

 

vue之登录和token处理

标签:token   headers   场景   lse   config   strong   pat   post   imp   

原文地址:https://www.cnblogs.com/qdlhj/p/9844944.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!