vue前端如何判断token失效

在Vue前端判断token失效主要有以下几点：1、检查token是否存在，2、通过token的过期时间判断，3、通过后端的API接口验证，4、拦截器统一处理，5、捕获API请求错误。以下是详细的解释和指南。

一、检查token是否存在

在Vue前端，首先需要检查token是否存在。这是判断用户是否已经登录的第一步。通常，token会存储在localStorage、sessionStorage或cookie中。可以通过以下代码检查token的存在：

const token = localStorage.getItem('token');
if (!token) {
    // Token不存在，用户需要登录
    alert('Token不存在，请登录');
    // 重定向到登录页面
    this.$router.push('/login');
}

二、通过token的过期时间判断

许多token（如JWT）会包含过期时间（exp）。可以通过解析token并检查其过期时间来判断token是否失效。以下是一个示例：

import jwtDecode from 'jwt-decode';
const token = localStorage.getItem('token');
if (token) {
    const decoded = jwtDecode(token);
    const currentTime = Date.now() / 1000;
    if (decoded.exp < currentTime) {
        // Token已过期
        alert('Token已过期，请重新登录');
        localStorage.removeItem('token');
        this.$router.push('/login');
    }
}

三、通过后端的API接口验证

在某些情况下，前端无法准确判断token是否失效。这时可以通过向后端发送请求来验证token是否有效。后端会返回token的有效性信息。以下是一个示例：

axios.get('/api/verify-token', {
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
}).then(response => {
    if (!response.data.valid) {
        // Token无效
        alert('Token无效，请重新登录');
        localStorage.removeItem('token');
        this.$router.push('/login');
    }
}).catch(error => {
    // 请求失败，可能是网络问题或其他原因
    console.error(error);
});

四、拦截器统一处理

使用Axios的拦截器可以在每个API请求前后统一处理token的有效性。这可以确保在每次请求时检查token，并在token无效时进行相应处理。以下是一个示例：

axios.interceptors.response.use(response => {
    return response;
}, error => {
    if (error.response.status === 401) {
        // Token无效或已过期
        alert('Token无效或已过期，请重新登录');
        localStorage.removeItem('token');
        this.$router.push('/login');
    }
    return Promise.reject(error);
});

五、捕获API请求错误

在每次API请求中捕获错误也可以帮助判断token是否失效。可以在每个请求的catch块中处理token失效的情况。以下是一个示例：

axios.get('/api/protected-route', {
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
    }
}).catch(error => {
    if (error.response.status === 401) {
        // Token无效或已过期
        alert('Token无效或已过期，请重新登录');
        localStorage.removeItem('token');
        this.$router.push('/login');
    } else {
        // 处理其他错误
        console.error(error);
    }
});

总结

判断token失效的方法主要有五种：1、检查token是否存在，2、通过token的过期时间判断，3、通过后端的API接口验证，4、拦截器统一处理，5、捕获API请求错误。每种方法都有其适用场景，可以根据具体需求选择使用。

进一步的建议是：

结合多种方法来提高判断的准确性。
在系统设计阶段考虑token失效后的用户体验，例如友好的提示和自动重定向。
定期清理过期的token，保持存储的整洁。