Vue中Token登录状态验证问题：非法/过期Token无法识别

嘿，这个问题我之前帮好几个开发者踩过坑——前端只靠token是否存在判断登录状态肯定不靠谱，毕竟用户能手动改Cookie、token也会过期，必须让后端来做Token有效性的最终验证才行。下面给你分步拆解解决方案：

核心思路 #

前端的任何数据（包括Cookie、Vuex状态）都可以被篡改，所以不能只看token !== null，必须调用后端的验证接口，由后端确认Token是否合法（签名正确、未过期、未被撤销），再根据后端结果更新登录状态。

具体实现步骤 #

1. 在Vuex中添加Token验证的Action #

首先扩展你的Vuex Store，新增一个verifyToken异步Action，用来调用后端的Token验证接口：

// store/index.js
import axios from 'axios';

export default new Vuex.Store({
  state: {
    token: localStorage.getItem('access_token') || null, // 假设你把Token存在localStorage或Cookie
    loggedIn: false,
    userInfo: null
  },
  mutations: {
    SET_TOKEN(state, token) {
      state.token = token;
      localStorage.setItem('access_token', token); // 同步到存储
    },
    SET_LOGGED_IN(state, status) {
      state.loggedIn = status;
    },
    CLEAR_AUTH_STATE(state) {
      state.token = null;
      state.loggedIn = false;
      state.userInfo = null;
      localStorage.removeItem('access_token');
    }
  },
  actions: {
    async verifyToken({ commit, state }) {
      // 如果没有Token，直接标记未登录
      if (!state.token) {
        commit('SET_LOGGED_IN', false);
        return false;
      }

      try {
        // 调用后端验证接口，带上Token
        const response = await axios.get('/api/auth/verify-token', {
          headers: {
            Authorization: `Bearer ${state.token}` // 假设用Bearer认证
          }
        });

        // 验证成功：更新登录状态，还可以顺便获取用户信息
        commit('SET_LOGGED_IN', true);
        commit('SET_USER_INFO', response.data.user);
        return true;
      } catch (error) {
        // 验证失败（Token过期、无效、被篡改）：清空所有认证状态
        commit('CLEAR_AUTH_STATE');
        return false;
      }
    }
  },
  getters: {
    loggedIn(state) {
      return state.loggedIn; // 现在这个状态是后端验证后的结果，更可靠
    }
  }
});

2. 修改路由守卫，加入Token验证 #

更新router.beforeEach钩子，在需要权限的路由里先调用verifyToken，根据验证结果决定跳转：

// app.js
router.beforeEach(async (to, from, next) => {
  // 处理需要登录的路由
  if (to.matched.some(record => record.meta.requiresAuth)) {
    const isTokenValid = await store.dispatch('verifyToken');
    if (!isTokenValid) {
      // Token无效，跳转到登录页（可携带重定向参数）
      next({ name: 'login', query: { redirect: to.fullPath } });
    } else {
      next();
    }
  } 
  // 处理访客专属路由（比如登录页）
  else if (to.matched.some(record => record.meta.requiresVisitor)) {
    const isTokenValid = await store.dispatch('verifyToken');
    if (isTokenValid) {
      // 已登录，跳转到首页
      next({ name: 'dashboard' });
    } else {
      next();
    }
  } 
  // 其他路由直接放行
  else {
    next();
  }
});

3. 后端配合实现Token验证接口 #

后端需要提供一个接口（比如/api/auth/verify-token），用来验证Token的有效性。以JWT为例，用Node.js的jsonwebtoken库实现的示例：

// 后端Node.js示例
const jwt = require('jsonwebtoken');
const secretKey = process.env.JWT_SECRET;

app.get('/api/auth/verify-token', (req, res) => {
  const authHeader = req.headers.authorization;
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return res.status(401).json({ message: 'Token缺失' });
  }

  const token = authHeader.split(' ')[1];
  try {
    // 验证Token的签名和过期时间
    const decoded = jwt.verify(token, secretKey);
    // 可额外检查Token是否在黑名单（比如用户主动登出）
    // if (tokenBlacklist.has(token)) return res.status(401).json({ message: 'Token已失效' });
    
    // 验证成功，返回用户信息
    res.status(200).json({ user: decoded.user });
  } catch (error) {
    // Token过期或无效
    res.status(401).json({ message: 'Token无效或已过期' });
  }
});

优化小技巧 #

• 添加加载状态：在Vuex里加个isVerifying状态，验证过程中显示加载动画，避免页面闪烁。
• 缓存验证结果：记录上次验证时间，短时间内（比如5分钟）重复跳转时不用重复调用接口，提升性能。
• 全局拦截401：给Axios加响应拦截器，当后端返回401时自动清空认证状态并跳转到登录页，避免单个页面处理遗漏。

内容的提问来源于stack exchange，提问作者Jim E Russel