快捷導(dǎo)航

Vue中的Token過期驗證與動態(tài)路由重定向詳解

更新時間：2025年03月19日 10:26:39 作者：碼農(nóng)阿豪@新空間

這篇文章主要為大家詳細介紹了如何在 Vue 項目中實現(xiàn) Token 過期驗證,并根據(jù) Token 的有效期動態(tài)重定向用戶到首頁或登錄頁,感興趣的小伙伴可以了解下

在現(xiàn)代 Web 應(yīng)用中，用戶認證和權(quán)限管理是至關(guān)重要的功能。為了實現(xiàn)安全的用戶認證，通常會使用 Token 機制來驗證用戶身份。然而，Token 通常有一個有效期（如 7 天），過期后需要重新登錄。本文將詳細介紹如何在 Vue 項目中實現(xiàn) Token 過期驗證，并根據(jù) Token 的有效期動態(tài)重定向用戶到首頁或登錄頁。

1. 背景與需求

在一個典型的 Vue 項目中，用戶登錄后會生成一個 Token，并將其存儲在客戶端（如 localStorage 或 sessionStorage）。為了提升用戶體驗，我們希望：

用戶在 Token 有效期內(nèi)訪問網(wǎng)站時，自動跳轉(zhuǎn)到首頁。
如果 Token 已過期，則重定向到登錄頁。
直接訪問域名時，根據(jù) Token 狀態(tài)動態(tài)重定向。

本文將圍繞這些需求，結(jié)合 Vue Router 和 Nginx 配置，實現(xiàn)一個完整的解決方案。

2. 技術(shù)棧

Vue.js：前端框架，用于構(gòu)建單頁應(yīng)用（SPA）。

Vue Router：Vue 官方路由管理器，用于實現(xiàn)頁面導(dǎo)航。

Nginx：Web 服務(wù)器，用于部署 Vue 項目并支持 History 模式。

localStorage：瀏覽器本地存儲，用于持久化 Token 及其有效期。

3. 實現(xiàn)思路

Token 存儲：

用戶登錄成功后，將 Token 和其有效期（TOKEN_TIME）存儲在 localStorage 中。
TOKEN_TIME 是一個字符串格式的時間，如 "2025-03-25 10:03:35"。

路由配置：

使用 Vue Router 定義路由，包括登錄頁、首頁等。
在路由跳轉(zhuǎn)前，通過導(dǎo)航守衛(wèi)檢查 TOKEN_TIME 是否過期。

動態(tài)重定向：

如果 TOKEN_TIME 未過期，且用戶訪問登錄頁，則重定向到首頁。
如果 TOKEN_TIME 已過期，且用戶訪問需要認證的頁面，則重定向到登錄頁。

Nginx 配置：

配置 Nginx 支持 Vue 項目的 History 模式，確保直接訪問域名時返回 index.html。

4. 代碼實現(xiàn)

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' }, // 首頁
];

// 創(chuàng)建路由實例
const router = new Router({
  routes: constRouter,
});

export default router;

4.2 導(dǎo)航守衛(wèi)

在路由跳轉(zhuǎn)前，通過導(dǎo)航守衛(wèi)檢查 TOKEN_TIME 是否過期。如果未過期，則允許訪問目標頁面；否則，重定向到登錄頁。

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

  if (tokenTimeStr) {
    // 將字符串時間轉(zhuǎn)換為時間戳
    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 {
        // 否則繼續(xù)正常跳轉(zhuǎn)
        next();
      }
      return; // 結(jié)束邏輯
    }
  }

  // 如果 TOKEN_TIME 不存在或已過期
  if (to.path !== '/login') {
    // 如果目標路徑不是登錄頁，則重定向到登錄頁
    next({ path: '/login' });
  } else {
    // 否則繼續(xù)正常跳轉(zhuǎn)
    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 模式
    }

    # 可選：配置靜態(tài)資源緩存
    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;
    }
}