关于解决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)
blank

相关推荐

  • 新后缀supporthelpgood勒索病毒出现 解密sql文件 恢复成功mdf

    新后缀supporthelpgood勒索病毒出现 解密sql文件 恢复成功mdf

  • java的线程是用户态还是内核态_内核态和用户态的区别

    java的线程是用户态还是内核态_内核态和用户态的区别内核态用户态是什么?操作系统对程序的执行权限进行分级,分别为用户态和内核态。用户态相比内核态有较低的执行权限,很多操作是不被操作系统允许的,简单来说就是用户态只能访问内存,防止程序错误影响到其他程序,而内核态则是可以操作系统的程序和普通用户程序内核态:cpu可以访问计算机所有的软硬件资源用户态:cpu权限受限,只能访问到自己内存中的数据,无法访问其他资源为什么要有用户态和内核态?系统需要限制不同的程序之间的访问能力,防止程序获取不相同程序的内存数据,或者外围设备的数据,并发送到网络,所有cpu

  • mysql 端口号_mysql的端口号(mysql常用端口号)「建议收藏」

    mysql的端口号(mysql常用端口号)2020-05-0721:58:15共10个回答mysql的默认端口号是多少mysql默认端口号为3306,修改端口号方法:修改配置文件/etc/my.cnf如何查看mysql的端口号1使用命令showglobalvariableslike’port’;查看端口号2修改端口,编辑/etc/my.cnf文件,早期版本有可能是my.conf文件名,增加端口参…

  • 数据挖掘在电子商务中的应用

    数据挖掘在电子商务中的应用如何对大量信息进行有效组织利用,使用户能够从大量繁杂的信息中找出真正有价值的信息和知识,帮助企业制定更好的营销策略。信息处理技术有了新的应用研究课题——数据挖掘。 1.数据挖掘在电子商务中的作用  数据挖掘技术之所以可以服务电子商务,是因为它能够挖掘出活动过程中的潜在信息以指导电子商务营销活动。在电子商务中其作用有4个方面:  (1)挖掘客户活动规律,针对性的在电子商务平台下以提供…

  • 广东汕尾电信稳定dns服务器,广东电信的DNS是多少?

    广东汕尾电信稳定dns服务器,广东电信的DNS是多少?广东省广州市(中国电信)首选DNS:202.96.128.86备份DNS:202.96.128.166广东省汕尾市(中国电信)首选DNS:202.96.128.166备份DNS:202.96.128.86广东省汕头市(中国电信)备份DNS:202.96.128.166广东省河源市(中国电信)首选DNS:202.96.128.166备份DNS:202.96.128.86广东省深圳市(中国电…

  • 字符串匹配(多模式匹配篇)「建议收藏」

    字符串匹配(多模式匹配篇)「建议收藏」字符串匹配(多模式匹配篇)摘要:问题的提出:众所周知,KMP算法在O(n)的时间中solve单模式串匹配问题。但怎样solve多模式串匹配问题呢?Solve:本文用简要记叙了使用trie树,trie图(AC自动机)solve该问题的方法。关键字:字符串,多模式串匹配,trie树,trie图,AC自动机。前言:KMP算法是一种极其优秀的单模式串匹配算法,它通过前缀函数fail来减少匹配次数,以达到O…

发表回复

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

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