vue判断token过期和全局请求处理

以下是untils中request里判断过期及全局请求处理

import axios from 'axios'
import { useRouter } from "vue-router";
// import store from '../store/index'
import Setting from './setting'
import { ElMessage } from "element-plus";
const router = useRouter()

let service = axios.create({
  baseURL: Setting.baseURL,
  timeout: 5000,
})
service.interceptors.request.use((config: any) => {
  let token = localStorage.getItem('token')
  if (token !== "") {
    config.headers['Authorization'] = token
    return config
  } else {
    router.push("/")
  }
  // console.log(token);
}, (error: any) => {
  return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use(
  function (response) {
    // 对响应数据进行操作
    if (response.data.code == 401) {

      ElMessage.error('登录已过期,请重新登陆~')
      setTimeout(() => {
        window.location.replace("/")
      }, 500);
    }
    return response;
  },
  function (error) {
    // 对响应错误进行操作
    ElMessage.error(error.message)
    // console.log(error);
    return Promise.reject(error);
  }
);

<think>嗯,用户想了解在Vue2中如何实现token校验及请求的方法。我需要先回忆一下相关的知识,并结合提供的引用内容来组织回答。首先,用户提到了Vue项目中的token实现,可能涉及登录、存储、拦截器路由控制等方面。 首先,我应该分步骤讲解。比如,第一步是登录获取token,这需要调用后端接口,成功后存储token。根据引用3,用户提到将token保存到Vuex中,所以需要说明如何用Vuex管理状态。另外,引用4提到了Spring BootVUE的整合,可能涉及后端生成token,但用户主要关注前端实现,所以重点在前端处理。 接下来,token的存储位置。引用3引用5提到VuexlocalStorage的结合使用。用户可能需要在Vuex中存储以便全局访问,同时在localStorage中持久化,防止刷新后丢失。这点需要详细说明。 然后是请求拦截器。axios的拦截器是关键,引用2引用4提到在请求头中添加token,这里需要示范如何在请求拦截器中设置Authorization头。同时,处理响应拦截器,比如401错误时跳转登录页面,引用5中的路由拦截器可能与此相关。 路由守卫也是重点。使用Vue Router的全局前置守卫,检查是否存在token,决定是否允许进入页面。引用5提到token过期时的处理,可能需要刷新token或者跳转登录。这里需要说明如何配置路由守卫,并结合拦截器处理token刷新。 此外,引用5还提到了token刷新的机制,比如使用need-refresh标识防止多个刷新请求的isRefreshing标志。这部分需要解释如何在拦截器中检测token即将过期,并触发刷新流程,同时避免并发请求的问题。 可能还需要考虑跨域问题,引用4中后端配置跨域,但前端可能也需要设置axios的baseURL或代理。不过用户的问题主要在前端,所以可能简要提及。 最后,总结整个流程,确保步骤清晰。同时,生成相关问题,帮助用户深入理解,比如token存储位置、刷新机制、路由守卫的作用等。 需要检查引用的内容是否准确对应到回答中,比如引用3关于保存到Vuex,引用2关于express-jwt可能涉及后端验证,但用户的问题在前端,所以重点在前端处理。引用5的刷新机制需要详细说明。 还要注意用户使用的是Vue2,所以语法示例代码要符合Vue2的写法,比如使用this.$store而不是组合式API。确保代码示例正确,比如在拦截器中使用Vuex的state,以及路由守卫的next()用法。 可能的疑问点:如何处理多个并发请求时的token刷新?需要解释isRefreshing标志的作用,确保只有一个刷新请求在进行,其他请求排队等待。这在引用5中有提到,需要详细说明。 总之,回答需要结构清晰,分步骤讲解,结合代码示例引用内容,确保用户能一步步实现token校验请求处理,并理解相关机制。</think>### Vue2中Token校验及请求实现步骤 #### 一、登录获取Token 1. **调用登录接口** 用户提交账号密码后,通过axios向后端发送请求获取token。响应成功后需保存token到本地存储Vuex中: ```javascript // Login.vue axios.post('/api/login', { username, password }) .then(res => { const token = 'Bearer ' + res.data.token; this.$store.commit('setToken', token); // 存储到Vuex localStorage.setItem('token', token); // 持久化存储 this.$router.push('/dashboard'); // 跳转至主页 }) ``` 2. **Vuex状态管理** 使用Vuex集中管理token状态,确保全局访问: ```javascript // store.js export default new Vuex.Store({ state: { token: localStorage.getItem('token') || '' }, mutations: { setToken(state, token) { state.token = token; localStorage.setItem('token', token); }, clearToken(state) { state.token = ''; localStorage.removeItem('token'); } } }); ``` #### 二、请求拦截器配置 1. **添加Token请求头** 在axios请求拦截器中自动附加token,实现身份验证[^2][^3]: ```javascript // main.js axios.interceptors.request.use(config => { const token = store.state.token; if (token) { config.headers.Authorization = token; // 添加Authorization头 } return config; }, error => Promise.reject(error)); ``` 2. **响应拦截器处理Token失效** 拦截401状态码,自动跳转登录页并清除过期token[^5]: ```javascript axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { store.commit('clearToken'); router.push('/login'); } return Promise.reject(error); } ); ``` #### 三、路由守卫控制访问权限 通过全局前置守卫验证token存在性,拦截未授权访问[^4]: ```javascript // router.js router.beforeEach((to, from, next) => { const isLogin = store.state.token; if (to.meta.requiresAuth && !isLogin) { next('/login'); // 需登录的页面且未认证则跳转 } else { next(); // 放行 } }); ``` #### 四、Token刷新机制(进阶) 1. **判断Token有效期** 后端可在响应头返回`need-refresh`标识,前端根据此标识触发刷新流程: ```javascript axios.interceptors.response.use(response => { if (response.headers['need-refresh'] === 'true') { refreshToken(); // 调用刷新token接口 } return response; }); ``` 2. **防止重复刷新** 使用标志位`isRefreshing`控制并发请求: ```javascript let isRefreshing = false; function refreshToken() { if (!isRefreshing) { isRefreshing = true; axios.post('/api/refresh') .then(res => { store.commit('setToken', res.data.newToken); isRefreshing = false; }) .catch(() => { store.commit('clearToken'); router.push('/login'); }); } } ``` ### 代码示例汇总 ```javascript // 完整请求拦截器示例 axios.interceptors.request.use(config => { config.headers = config.headers || {}; if (store.state.token) { config.headers.Authorization = store.state.token; } return config; }); // 路由守卫扩展(带自动刷新) router.beforeEach(async (to, from, next) => { if (to.meta.requiresAuth) { if (store.state.token) { if (isTokenExpired()) { // 自定义检查过期函数 await refreshToken(); } next(); } else { next('/login'); } } else { next(); } }); ``` ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值