关于解决token过期失效问题「建议收藏」

关于解决token过期失效问题「建议收藏」关于解决token过期失效问题,用户对token无感知(实现免登陆)一、先认识下token二、整体思路三、实现步骤1.理清各个文件作用2.路由导航守卫3.封装localStorage方法4.vuex5.封装axios实现请求拦截器和响应拦截器(重点部分)四、小结一、先认识下token二、整体思路三、实现步骤1.理清各个文件作用2.路由导航守卫设置用户有无token访问主页,并且登录成功回到目标页importVuefrom’vue’importVueRouterfrom’v

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一、先认识下token

在这里插入图片描述

二、整体思路

在这里插入图片描述

三、实现步骤

1.理清各个文件作用

在这里插入图片描述

2.路由导航守卫

设置用户有无token访问主页,并且登录成功回到目标页

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index.js'
Vue.use(VueRouter)
const router = new VueRouter({ 
   
  routes
})
// 路由导航守卫
router.beforeEach((to, from, next) => { 
   
  if (to.path.startsWith('/user')) { 
   
    // 判断token
    if (store.state.tokenInfo.token) { 
   
      next()
    } else { 
   
      next({ 
   
        path: '/login',
        query: { 
   
          // 登录成功回到目标页
          backto: to.fullPath // fullPath 会拿到路由后面的查询字符串
        }
      })
    }
  } else { 
   
    next()
  }
})
export default router
3.封装localStorage方法

目的在vuex中调用

/ 封装模块 使用localStorage实现持久化 只是进行保存
// 从localStorage中取出一项数据 名字叫name
export const getItem = name => { 
   
  return JSON.parse(localStorage.getItem(name))
}
// 向localStorage中设置一项数据 名字为name里面设置值为obj
export const setItem = (name, obj) => { 
   
  localStorage.setItem(name, JSON.stringify(obj))
}
// 删除
export const removeitem = name => { 
   
  localStorage.removeItem(name)
}
4.vuex
import Vue from 'vue'
import Vuex from 'vuex'
import { 
    setItem, getItem } from '@/utils/storage.js'
Vue.use(Vuex)

export default new Vuex.Store({ 
   
  state: { 
   
    // 保存公共数据
    tokenInfo: getItem('tokenInfo') || { 
   }
  },
  mutations: { 
   
    mSetTokenInfo (state, tokenObj) { 
   
      state.tokenInfo = tokenObj
      // 因为刷新会丢失所以进行持久化 调用storage方法
      setItem('tokenInfo', tokenObj)
    }
  },
  // -------------------此次重点---------------------------------------------------------
  // 只跟新token 不跟新响应拦截器里面的refreshToken
  mUpdateToken (state, newToken) { 
   
    state.tokenInfo.token = newToken
    setItem('tokenInfo', state.tokenInfo)
  },
  actions: { 
   
  },
  modules: { 
   
  }
})
5.封装axios 实现请求拦截器和响应拦截器(重点部分)

关于axios拦截器 可参考官方文档
(点我)axios拦截器官方跳转链接

/* 对axios进行二次封装 请求拦截器增加token 响应拦截器处理大数据 */
import store from '@/store/index.js'
import axios from 'axios'
import JSONbig from 'json-bigint' // 引入大数字包
import router from '@/router/index.js'
/* 以前写法: axios.defaults.baseURL = 'XXX' 自定义写法:const xxx = axios.create({}) 一个项目中可能有不同的基地址 就要用自定义写法设置不同的基地址 */
const instance = axios.create({ 
   
  baseURL: 'http://ttapi.research.itcast.cn',
  transformResponse: [function (data) { 
   
    if (data === '') { 
   
      return false
    }
    try { 
   
      // 如果没有遇到错误,就返回 JSONbig处理之后的数据
      return JSONbig.parse(data)
    } catch (err) { 
   
      console.log('JSONbig转换出错', err)
      return data
    }
  }]
})
// 在instance上添加请求拦截器 补充请求头token信息
instance.interceptors.request.use(function (config) { 
   
  // 从vuex中取出token
  const token = store.state.tokenInfo.token
  // 如果有token则 添加到headers中
  if (token) { 
   
    config.headers.Authorization = `Bearer ${ 
     token}`
  }
  return config
}, function (error) { 
   
  return Promise.reject(error)
})
//------------------------这里处理token过期--------------------------------------------
// 添加响应拦截器 处理401 token过期
instance.interceptors.response.use(function (response) { 
   
  return response
}, async function (error) { 
   
  // 如果是401错误 则做以下错误
  if (error.response.status === 401) { 
   
    // 从vuex中取出token
    const refreshToken = store.state.tokenInfo.token
    // 是否有refreshToken
    if (refreshToken) { 
   
      // 用refresh_token 重发请求 再次取回一个有效期的
      try { 
   
       // 注意这里重新发请求要用axios 不能用封装的instance url地址是根据接口文档写的
        const { 
    data: res } = await axios({ 
   
          method: 'PUT',
          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
          headers: { 
   
            Authorization: `Bearer ${ 
     refreshToken}`
          }
        })
        // 定义赋值新的token
        const newToken = res.data.token
        // 跟新vuex
        store.commit('mUpdateToken', newToken)
        // 再发请求
        return instance(error.config)
      } catch { 
     // 如果没有拿到新的token 
        // 回登录页
        router.push({ 
   
          path: '/login',
          query: { 
   
            // currentRoute表示当前路由对象
            backto: router.currentRoute.fullPath
          }
        })
      }
    } else { 
      // 如果没有refreshToken
      router.push({ 
   
        path: '/login',
        query: { 
   
          backto: router.currentRoute.fullPath
        }
      })
    }
  } else { 
     // 如果不是401错误
    return Promise.reject(error)
  }
})
export default instance

四、小结

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194603.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • mtk手机维修_mtk平台手机

    mtk手机维修_mtk平台手机默认分类2009-10-1902:21:04阅读1252评论7字号:大中小  MTK用电池不开机,用外用电源能开机的维修方法:MTK用电池不开机,用外用电源能开机的维修方法,我们可以找到VBAT也就是电触B+通电源的sas31233l213321+987+9877777777777777777777777777777777777777777777777777

    2022年10月28日
  • cameralink转hdmi_输入电阻和输出电阻

    cameralink转hdmi_输入电阻和输出电阻FMC202是北京青翼科技的一款基于FMC接口标准的1路CameraLinkFull模式(或者2路CameraLinkBase模式)采集、1路HDMI(DVI)视频输出的子卡模块,该模块具有2个CameraLink端口(SDR,26PIN),可通过硬件配置成1路Full输入或者2路Base模式输入,CameraLink接口支持80BitDeca模式(即FullPlus模式)。该模块支持1

  • finemolds模型_yolo模型训练

    finemolds模型_yolo模型训练在已有模型上finetune自己的数据训练一个模型1、准备训练数据和测试数据2、制作标签3、数据转换,将图片转为LMDB格式前三步的过程和如何利用自己的数据训练一个分类网络是一样的,参考处理即可。4、修改网络模型文件复制/caffe-root/models/finetune_flickr_style文件夹下面的deploy.prototxt…

  • haxm intel庐_如何开启Intel HAXM功能「建议收藏」

    haxm intel庐_如何开启Intel HAXM功能「建议收藏」1.启用BIOS中的Intel(R)VirtualizationTechnology选项2.设置成功后,在控制台中输入scqueryintelhaxm。出现下图即为成功3.启动androidSDK,在Extras目录的最下边,勾选IntelHAXM项,并下载4.下载完成后,打开目录:Sdk\extras\intel\Hardware_Accelerated_Execution_…

  • python 进制转换[通俗易懂]

    python 进制转换[通俗易懂]文章目录前言一、Python提供的进制转换方法1.二进制转十进制2.八进制转十进制3.十六进制转十进制4.十进制转十六进制5.十进制转二进制6.十进制转八进制二、自定义进制转换1.转十进制2.十进制转七进制总结前言十进制是我们常用的数字形式,但机器使用的却是二进制,八进制,十六进制之类的,所以进制转换是基础要求,很多编程语言提供的有进制转换的方法,下面我们开始学习一、Python提供的进制转换方法1.二进制转十进制s=’1001’print(int(s,2))结果如下:in..

  • 方法引用

    方法引用

    2021年11月12日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号