快捷導(dǎo)航

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

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

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

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

1. 背景與需求

在一個(gè)典型的 Vue 項(xiàng)目中，用戶登錄后會(huì)生成一個(gè) Token，并將其存儲(chǔ)在客戶端（如 localStorage 或 sessionStorage）。為了提升用戶體驗(yàn)，我們希望：

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

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

2. 技術(shù)棧

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

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

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

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

3. 實(shí)現(xiàn)思路

Token 存儲(chǔ)：

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

路由配置：

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

動(dòng)態(tài)重定向：

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

Nginx 配置：

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

4. 代碼實(shí)現(xiàn)

4.1 路由配置

首先，定義 Vue 項(xiàng)目的路由配置。默認(rèn)情況下，根路徑 / 重定向到登錄頁(yè) /login。如果用戶已登錄且 Token 未過期，則重定向到首頁(yè) /home。

import Vue from 'vue';
import Router from 'vue-router';
import Login from '@/components/Login.vue'; // 登錄頁(yè)組件
import Home from '@/components/Home.vue'; // 首頁(yè)組件

Vue.use(Router);

// 定義路由
const constRouter = [
  { path: '/', redirect: '/home' }, // 默認(rèn)重定向到首頁(yè)
  { path: '/login', component: Login, name: 'Login' }, // 登錄頁(yè)
  { path: '/home', component: Home, name: 'Home' }, // 首頁(yè)
];

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

export default router;

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

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

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

  if (tokenTimeStr) {
    // 將字符串時(shí)間轉(zhuǎn)換為時(shí)間戳
    const tokenTime = new Date(tokenTimeStr).getTime();
    const currentTime = new Date().getTime();

    // 判斷 TOKEN_TIME 是否未過期
    if (tokenTime > currentTime) {
      // Token 未過期
      if (to.path === '/login') {
        // 如果目標(biāo)路徑是登錄頁(yè)，則重定向到首頁(yè)
        next({ path: '/home' });
      } else {
        // 否則繼續(xù)正常跳轉(zhuǎn)
        next();
      }
      return; // 結(jié)束邏輯
    }
  }

  // 如果 TOKEN_TIME 不存在或已過期
  if (to.path !== '/login') {
    // 如果目標(biāo)路徑不是登錄頁(yè)，則重定向到登錄頁(yè)
    next({ path: '/login' });
  } else {
    // 否則繼續(xù)正常跳轉(zhuǎn)
    next();
  }
});

4.3 Token 存儲(chǔ)與驗(yàn)證

在用戶登錄成功后，將 TOKEN_TIME 存儲(chǔ)到 localStorage 中。例如：

// 用戶登錄成功后
const tokenTime = new Date();
tokenTime.setDate(tokenTime.getDate() + 7); // 7 天后的時(shí)間
localStorage.setItem('TOKEN_TIME', tokenTime.toLocaleString());

5. Nginx 部署配置

為了支持 Vue 項(xiàng)目的 History 模式，需要配置 Nginx 返回 index.html 文件。以下是一個(gè)完整的 Nginx 配置示例：

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

    root /var/www/my-vue-project/dist; # Vue 項(xiàng)目打包后的 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;
    }
}