VueJS SPA与JWT Token验证时机：Laravel项目路由验证方案咨询

Great question—this is a super common scenario when building SPAs, and balancing security with user experience is key here. Let’s break this down clearly:

Do You Need an AJAX Request in Every Route Guard? #

Short answer: No, you don’t need to hit the backend for every single route switch, but you do need a layered approach to validation. Here’s why:

• Local quick checks first: Before hitting the backend, you can validate basic Token validity client-side:

  • Check if the Token exists in localStorage
  • Decode the JWT (using a library like jwt-decode) to verify it hasn’t expired (check the exp claim)
    These checks are instant and save unnecessary API calls for obvious cases (like a missing/expired Token).

• Selective backend validation: For high-sensitivity routes (e.g., admin dashboards, payment pages), or if you want to ensure the Token hasn’t been revoked server-side, you can add backend validation—but not for every route. Instead:

  • Use a global route guard that runs once per session (or on a timed interval) instead of per-route hooks
  • Track the last time you validated the Token client-side (store a timestamp in localStorage) and only re-validate if enough time has passed (e.g., 5-15 minutes)

When to Validate JWT Tokens? #

Here are the key validation timings to cover all bases:

1. On Initial App Load #

When the user refreshes the page or opens your app, immediately:

• Check for a Token in localStorage
• If present, send a single validation request to your Laravel backend (e.g., GET /api/me or GET /api/validate-token) to confirm it’s still valid
• If valid, restore the user’s authenticated state; if not, clear the Token and redirect to login

2. Before Accessing Protected Routes #

Use Vue’s global beforeEach route guard to:

• Skip validation for public routes
• For protected routes:
  1. Do the local checks (Token exists + not expired)
  2. If local checks pass, either proceed directly (for low-sensitivity routes) or trigger a backend validation if it’s been too long since the last check

3. On Every API Request #

Your Laravel backend should validate the Token on every authenticated API request—this is non-negotiable for security. On the frontend:

• Add an Axios request interceptor to automatically attach the Token to the Authorization header
• Add a response interceptor to catch 401 Unauthorized errors: if the backend rejects the Token, clear localStorage and redirect to login immediately

4. Timed Background Validation #

For users who stay on your app for long periods (e.g., admin users), set a timer (e.g., every 15 minutes) to silently validate the Token in the background. This prevents the user from being logged out mid-action because their Token expired without them knowing.

Example Code Snippets #

Global Route Guard #

import router from './router';
import axios from 'axios';
import jwtDecode from 'jwt-decode';

router.beforeEach(async (to, from, next) => {
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const token = localStorage.getItem('token');

  if (requiresAuth) {
    if (!token) {
      next('/login');
      return;
    }

    // Local check: Is Token expired?
    const decodedToken = jwtDecode(token);
    const isExpired = Date.now() >= decodedToken.exp * 1000;

    if (isExpired) {
      localStorage.removeItem('token');
      next('/login');
      return;
    }

    // Check if we've validated recently (e.g., within 5 minutes)
    const lastValidation = localStorage.getItem('lastTokenValidation');
    const shouldValidate = !lastValidation || Date.now() - lastValidation > 5 * 60 * 1000;

    if (shouldValidate) {
      try {
        await axios.get('/api/validate-token');
        localStorage.setItem('lastTokenValidation', Date.now().toString());
        next();
      } catch (err) {
        localStorage.removeItem('token');
        localStorage.removeItem('lastTokenValidation');
        next('/login');
      }
    } else {
      next();
    }
  } else {
    next();
  }
});

Axios Interceptors #

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('token');
      localStorage.removeItem('lastTokenValidation');
      router.push('/login');
    }
    return Promise.reject(error);
  }
);

Key Takeaways #

• Client-side checks are for UX, not security: Always rely on your Laravel backend to validate the Token on API requests—client-side checks just prevent unnecessary redirects and API calls.
• Avoid over-validating: Too many backend requests on route switches will slow down your app. Use timed validation instead.
• Handle 401s globally: Your response interceptor ensures any invalid Token (expired, revoked) triggers an immediate logout.

内容的提问来源于stack exchange，提问作者Paul Diamant