Vue.js授权用户路由等效配置及404路由处理问题

Got it, let's tackle this routing setup step by step to meet your exact requirements. First, let's recap what we need to build:

• Unauthenticated Users: Keep the original flow: / loads the Entrypoint (login/logout), and accessing /home redirects back to /.
• Authenticated Users: / and /home should behave identically—both load the same content (previously the Home component) with the URL统一指向/ (no redirect loops, no 404s).
• All Undefined Routes: Catch-all to NotFoundComponent for proper 404 handling.

Step 1: Configure the Route Structure #

We'll set up a flexible route array with a dynamic root component that switches based on auth status, plus a catch-all 404 route.

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Entrypoint from '@/components/Entrypoint.vue';
import Home from '@/components/Home.vue';
import NotFoundComponent from '@/components/NotFoundComponent.vue';

// Helper function to check user auth status (replace with your actual logic)
const isAuthenticated = () => {
  // Example: Check for a valid auth token in localStorage
  return !!localStorage.getItem('authToken');
};

// Dynamic root component that renders Entrypoint or Home based on auth status
const RootComponent = {
  components: { Entrypoint, Home },
  template: `<component :is="currentComponent" />`,
  computed: {
    currentComponent() {
      return isAuthenticated() ? 'Home' : 'Entrypoint';
    }
  }
};

const routes = [
  {
    path: '/',
    name: 'Root',
    component: RootComponent
  },
  // Redirect /home to / for all users—auth logic will handle the rest
  {
    path: '/home',
    redirect: '/'
  },
  // Catch-all route for undefined paths (Vue Router 4 syntax)
  {
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: NotFoundComponent
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

Step 2: Add Global Route Guard #

This guard will enforce our auth rules, ensuring unauthenticated users stay on the login flow and authenticated users get the seamless route experience.

// Add this to router/index.js after creating the router
router.beforeEach((to, from, next) => {
  const authStatus = isAuthenticated();

  // Handle unauthenticated users: redirect any non-root path back to /
  if (!authStatus) {
    if (to.path !== '/') {
      next('/');
    } else {
      next(); // Allow access to the Entrypoint login page
    }
  } else {
    // Authenticated users: allow all valid routes (we already redirect /home to /)
    next();
  }
});

export default router;

How This All Works #

1. Flexible Root Route: The / path uses a dynamic component that renders Home for authenticated users and Entrypoint for unauthenticated ones—no messy redirects needed for the root path.
2. Equivalent /home Route: /home always redirects to /, so both URLs land on the same component. For authenticated users, this means they see Home regardless of which URL they type.
3. 404 Handling: The catch-all route (/:pathMatch(.*)*) catches any undefined path and loads NotFoundComponent—make sure this is the last route in your array!
4. Unauthenticated Flow: Any attempt to access /home or other undefined paths redirects back to / (the login page), keeping your original behavior intact.

Optional: Keep URL Consistent #

If you want to ensure the URL always shows / (even if the user types /home), the redirect in the /home route already handles this—your browser's URL bar will update to / automatically.

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