Vue.js Vue Router Navigation Guards

When building Single Page Applications (SPAs), every URL accessed by the user triggers a page render. Exposing all interfaces directly to frontend requests not only leads to sensitive information leakage but can also cause logical errors or security risks. Vue Router, as the official routing manager for Vue.js, provides powerful features to manage these navigation behaviors. Among them, "Navigation Guards" are a core feature that allow us to intercept and handle actions before the user initiates a jump. By setting up reasonable guard strategies, developers can effectively control the application's lifecycle, verify login status, and execute global side effects, thereby enhancing the robustness and user experience of the application.
To write effective navigation guards, one must first understand the three main types of hook functions provided by Vue Router: Before Guards, After Guards, and Global Before/After Guards. These hooks are executed in order when a user initiates router.push, replace, or clicks a navigation link.

• Route beforeEach Guard
  This is the most common interception method, allowing checks to be performed before every navigation. If it returns a Promise, the execution must wait for its resolution; otherwise, the next navigation proceeds directly. This approach is suitable for verifying user identity (e.g., checking login status) or performing simple permission validation.

• Global Before/After beforeEach Guards
  Applicable for generic logic processing across all routes. For example, they can be used to uniformly initialize third-party plugins, set default language packs, or record detailed access logs at the start of the application. These guards do not receive specific to (target) and from (source) parameters but directly call the next() method to allow or block the jump.

• Route beforeEach After Guard
  Allows executing specific logic after navigation completion (e.g., clearing local cache, sending statistics to a server). These hooks are typically used to handle side effects after page switching without triggering a new navigation flow again.

Implementation Example for Permission-Based Route Interception

In practical development, the most common scenario is protecting pages containing sensitive content. Suppose we have an admin dashboard route /admin/dashboard that requires login access; we need to write a before guard to check the user's authentication status. If the user is not logged in, they should be redirected to the homepage with a prompt to log in again; if logged in, the navigation request should be allowed.

Below is a typical implementation code snippet based on Vue Router 3.x/4.x style:

// Configuration example for main.js or router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [/* ... */]

function checkLogin() {
    // Simulate retrieving token from localStorage; in actual projects, call an API to verify
    const isLoggedIn = !!localStorage.getItem('token')
    
    if (!isLoggedIn) {
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve({ redirected: true }), 1000)
        })
    } else {
        return next() // Allow navigation
    }
}

const router = createRouter({
    history: createWebHistory(),
    routes,
    beforeEach: (to, from, next) => {
        if (to.meta.requiresAuth && !checkLogin()) {
            console.log('User not logged in, redirecting')
            // Returning a Promise waits for the resolution result (e.g., redirected)
            return new Promise((resolve) => resolve({ redirected: true })) 
        } else {
            next() // Allow navigation
        }
    },
})

router.beforeEach(async (to, from, next) => {
    if (checkLogin()) {
        await checkLogin() // Wait for login check to complete
    }
    
    return new Promise((resolve) => resolve({ redirected: true }))
})

In the above example, the beforeEach guard receives three parameters: to, from, and next. The key is using an asynchronous function that returns a Promise, allowing time-consuming operations (such as network request verification) to be executed before navigation occurs. Based on the result, one decides whether to call next() to allow passage or block the jump and prompt the user.

Handling Complex Scenarios and Global Side Effect Management

In addition to basic permission control, Vue Router supports more complex interception logic, such as cross-origin resource loading, internationalization switching, and error handling. Utilizing route beforeEach after guards, developers can perform cleanup tasks or collect performance data after the page is fully rendered. Furthermore, combined with Vue's Composition API (such as <script setup>), these logics can be encapsulated into reusable composition functions, avoiding the repetition of writing the same verification code in multiple components.

It is worth noting that when navigation is intercepted, one should not directly modify the routing state; instead, call next(false) or return a rejected Promise to prevent the jump from occurring. For global before guards, it is recommended to use the router.beforeEach method provided by Vue Router to centrally manage the logic for all entry points, ensuring consistent processing results regardless of how the user enters the application (e.g., clicking a link, typing in the address bar).

Best Practices and Performance Optimization Suggestions

To maintain code maintainability and runtime efficiency, developers should adhere to the following principles when writing navigation guards:

1. Avoid Blocking the Main Thread: Try to place time-consuming network requests within async/await structures, utilizing the asynchronous nature of Promises to prevent UI lag.
2. Unified Error Handling Mechanism: Provide friendly prompt interfaces during network exceptions or authentication failures rather than letting users see blank pages or error messages.
3. Modular Design: Extract login verification, permission judgment, and other logics into independent functions or service layers for easier testing and reuse.

By reasonably utilizing Vue Router's navigation guard features, developers can not only build secure and reliable SPA architectures but also significantly enhance the fluidity and trustworthiness of the user experience during usage. As projects scale, this mechanism will become one of the cornerstones ensuring stable system operation.