Vue-Router路由守卫实现认证跳转逻辑技术咨询

Hey there, let's wrap up that router guard logic you started to cover all your required permission scenarios properly. Here's the complete implementation that handles both unauthenticated users being redirected from protected pages, and authenticated users being redirected away from guest-only pages like the login screen.

Full Route Guard Code #

router.beforeEach((to, from, next) => {
  // Extract authentication state once for cleaner code
  const isAuthenticated = store.state.auth.authenticated;

  // Scenario 1: Unauthenticated user trying to access an auth-protected page
  if (to.matched.some(route => route.meta.auth) && !isAuthenticated) {
    next({ name: 'Login' });
  } 
  // Scenario 2: Authenticated user trying to access a guest-only page (e.g., Login)
  else if (to.matched.some(route => route.meta.guest) && isAuthenticated) {
    next({ name: 'Home' }); // Replace 'Home' with your actual home route name
  } 
  // Scenario 3: All other cases (allow normal navigation)
  else {
    next();
  }
});

Key Breakdowns #

• to.matched.some(...): This checks if any route in the matched hierarchy (including parent routes) has the specified meta tag. This is critical for nested routes where a parent might set meta.auth to protect all child routes automatically.
• Guest Route Handling: The meta.guest check ensures logged-in users can't land on login/signup pages accidentally by redirecting them to the home page.
• Clean State Reference: Storing isAuthenticated as a variable avoids repeating store.state.auth.authenticated multiple times, making the code easier to read and maintain.

Example Route Configurations #

To make this work, add the corresponding meta tags to your route definitions:

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent,
    meta: { guest: true } // Mark as guest-only
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: DashboardComponent,
    meta: { auth: true } // Mark as auth-protected
  },
  {
    path: '/',
    name: 'Home',
    component: HomeComponent
    // No meta tag: accessible to both authenticated and unauthenticated users
  },
  {
    path: '/signup',
    name: 'Signup',
    component: SignupComponent,
    meta: { guest: true } // Another guest-only route
  }
];

Pro Tips #

• If you need role-based access later, extend the meta tags (e.g., meta: { auth: true, roles: ['admin', 'editor'] }) and add checks against the user's role in the guard.
• Persist your Vuex auth state (using tools like vuex-persistedstate) so authentication status survives page reloads.
• For routes that should redirect authenticated users to a different page (not just home), you can add a redirectTo meta property (e.g., meta: { guest: true, redirectTo: 'Dashboard' }) and use that in the guard instead of hardcoding 'Home'.

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