实现 Vue 项目中的 Token 过期验证与动态路由重定向

用户8589624

发布于 2025-11-15 14:54:43

1150

文章被收录于专栏：nginxnginx

实现 Vue 项目中的 Token 过期验证与动态路由重定向

在现代 Web 应用中，用户认证和权限管理是至关重要的功能。为了实现安全的用户认证，通常会使用 Token 机制来验证用户身份。然而，Token 通常有一个有效期（如 7 天），过期后需要重新登录。本文将详细介绍如何在 Vue 项目中实现 Token 过期验证，并根据 Token 的有效期动态重定向用户到首页或登录页。

1. 背景与需求

在一个典型的 Vue 项目中，用户登录后会生成一个 Token，并将其存储在客户端（如 localStorage 或 sessionStorage）。为了提升用户体验，我们希望：

用户在 Token 有效期内访问网站时，自动跳转到首页。
如果 Token 已过期，则重定向到登录页。
直接访问域名时，根据 Token 状态动态重定向。

本文将围绕这些需求，结合 Vue Router 和 Nginx 配置，实现一个完整的解决方案。

2. 技术栈

Vue.js：前端框架，用于构建单页应用（SPA）。
Vue Router：Vue 官方路由管理器，用于实现页面导航。
Nginx：Web 服务器，用于部署 Vue 项目并支持 History 模式。
localStorage：浏览器本地存储，用于持久化 Token 及其有效期。

3. 实现思路

Token 存储：
- 用户登录成功后，将 Token 和其有效期（TOKEN_TIME）存储在 localStorage 中。
- TOKEN_TIME 是一个字符串格式的时间，如 "2025-03-25 10:03:35"。
路由配置：
- 使用 Vue Router 定义路由，包括登录页、首页等。
- 在路由跳转前，通过导航守卫检查 TOKEN_TIME 是否过期。
动态重定向：
- 如果 TOKEN_TIME 未过期，且用户访问登录页，则重定向到首页。
- 如果 TOKEN_TIME 已过期，且用户访问需要认证的页面，则重定向到登录页。
Nginx 配置：
- 配置 Nginx 支持 Vue 项目的 History 模式，确保直接访问域名时返回 index.html。

4. 代码实现

4.1 路由配置

首先，定义 Vue 项目的路由配置。默认情况下，根路径 / 重定向到登录页 /login。如果用户已登录且 Token 未过期，则重定向到首页 /home。

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login.vue'; // 登录页组件
import Home from '@/components/Home.vue'; // 首页组件

Vue.use(Router);

// 定义路由
const constRouter = [
  { path: '/', redirect: '/home' }, // 默认重定向到首页
  { path: '/login', component: Login, name: 'Login' }, // 登录页
  { path: '/home', component: Home, name: 'Home' }, // 首页
];

// 创建路由实例
const router = new Router({
  routes: constRouter,
});

export default router;

4.2 导航守卫

在路由跳转前，通过导航守卫检查 TOKEN_TIME 是否过期。如果未过期，则允许访问目标页面；否则，重定向到登录页。

router.beforeEach((to, from, next) => {
  // 获取 TOKEN_TIME
  const tokenTimeStr = localStorage.getItem('TOKEN_TIME'); // 从 localStorage 中获取

  if (tokenTimeStr) {
    // 将字符串时间转换为时间戳
    const tokenTime = new Date(tokenTimeStr).getTime();
    const currentTime = new Date().getTime();

    // 判断 TOKEN_TIME 是否未过期
    if (tokenTime > currentTime) {
      // Token 未过期
      if (to.path === '/login') {
        // 如果目标路径是登录页，则重定向到首页
        next({ path: '/home' });
      } else {
        // 否则继续正常跳转
        next();
      }
      return; // 结束逻辑
    }
  }

  // 如果 TOKEN_TIME 不存在或已过期
  if (to.path !== '/login') {
    // 如果目标路径不是登录页，则重定向到登录页
    next({ path: '/login' });
  } else {
    // 否则继续正常跳转
    next();
  }
});

4.3 Token 存储与验证

在用户登录成功后，将 TOKEN_TIME 存储到 localStorage 中。例如：

// 用户登录成功后
const tokenTime = new Date();
tokenTime.setDate(tokenTime.getDate() + 7); // 7 天后的时间
localStorage.setItem('TOKEN_TIME', tokenTime.toLocaleString());

5. Nginx 部署配置

为了支持 Vue 项目的 History 模式，需要配置 Nginx 返回 index.html 文件。以下是一个完整的 Nginx 配置示例：

server {
    listen 80;
    server_name control.indexmob.com;

    root /var/www/my-vue-project/dist; # Vue 项目打包后的 dist 目录
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 支持 History 模式
    }

    # 可选：配置静态资源缓存
    location /static {
        expires 1y;
        add_header Cache-Control "public";
    }

    # 可选：配置 API 代理
    location /api {
        proxy_pass http://backend-server; # 后端 API 地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}