Vue中的Token过期验证与动态路由重定向详解

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;

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();
  }
});

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

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;
    }
}