zoukankan      html  css  js  c++  java
  • Vue token处理(请求拦截器,响应拦截器)

    1.登录成功后,拿到vueX里的token(本地也存储过),给请求都添加token
    vueX里的tokenInfo包括token和refresh_token
    request.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // token 在 user模块里
    const token = store.state.user.tokenInfo.token
    /* 如果token存在的话,给每个请求加上token */
    if (token) {
    config.headers.Authorization = Bearer ${token}
    }
    return config
    }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
    })

    // 处理token
    /*

    • 有refresh_token,用refresh_token去请求回新的token
      • 新token请求成功
        • 更新本地token
        • 再发一次请求A
      • 新token请求失败
        • 清空vuex中的token
        • 携带请求地址,跳转到登陆页
    • 没有refresh_token
      • 清空vuex中的token
      • 携带请求地址,跳转到登陆页 */
        request.interceptors.response.use(function (response) {
        // 对响应数据做点什么 (成功响应) response 就是成功的响应 res
        return response
        }, async function (error) {
        // 对响应错误做点什么 (失败响应) 处理401错误
        // console.dir(error)
        if (error.response.status === 401) {
        // 获取 refresh_token, 判断是否存在, 存在就去刷新token
        const refreshToken = store.state.user.tokenInfo.refresh_token
        if (refreshToken) {
        try {
        // 获取新的token
        const res = await axios({
        method: 'put',
        url: 'http://toutiao-app.itheima.net/v1_0/authorizations',
        // 请求头中携带refresh_token信息
        headers: {
        Authorization: Bearer ${refreshToken}
        }
        })
        const newToken = res.data.data.token
        // 将新token更新到vuex中
        store.commit('user/setTokenInfo', {
        refresh_token: refreshToken,
        token: newToken
        })
        // 重新发送页面请求, 携带的是token
        return request(error.config)
        } catch (error) {
        // 说明, 有refresh_token, 但是refresh_token也失效了 (登录失效了)
        // 先清除无效的token (vuex)
        store.commit('user/removeTokenInfo')
        Toast.fail('登录已过期, 请重新登录')
        router.push({
        path: '/login',
        query: {
        backTo: router.currentRoute.fullPath
        }
        })
        }
        } else {
        // 没有refreshToken, 直接去登录, 将来还能跳回来
        // router.currentRoute 指向当前路由信息对象 === 等价于之前页面中用的 this.$route
        // 清除本地token, 跳转登录 (无意义的本地token内容, 要清除)
        store.commit('removeToken')
        router.push({
        path: '/login',
        query: {
        // currentRoute当前路由
        backto: router.currentRoute.fullPath
        }
        })
        }
        }
        // 对响应错误做点什么
        // return new Promise(function (resolve, reject) {
        // reject(error)
        return Promise.reject(error)
        })
  • 相关阅读:
    你知道这高效的12个Java精品库嘛?
    一篇文章带你吃透,Java界最神秘技术ClassLoader
    带你认真了解一下Java分布式系统的基本特性
    因为选定的用户拥有对象,所以无法除去该用户
    mysql自定义函数与过程中写法的注意事项
    使用nssm在windows服务器上部署nodejs
    shopnc 手机网站配置
    关于navicat远程连接mysql问题
    KindEditor 4.1.2版本,在上传图片的时候 设置为绝对路径
    微信分享图标制作
  • 原文地址:https://www.cnblogs.com/zdy4396/p/14098667.html
Copyright © 2011-2022 走看看