设置某些路由为公开访问，不需要登录状态即可访问

在单页面应用（SPA）框架中，如Vue.js，路由守卫是一种非常有用的功能，它允许你控制访问路由的权限。Vue.js 使用 Vue Router 作为其官方路由管理器。路由守卫主要分为全局守卫和组件内守卫。

以下是如何设置路由守卫以允许某些路由公开访问的示例：

1. 全局前置守卫：在Vue Router的配置中，你可以使用 beforeEach 方法设置一个全局前置守卫，来检查用户是否登录，并根据登录状态重定向用户。

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import Dashboard from '../components/Dashboard.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: Dashboard,
      meta: {
        requiresAuth: true // 标记需要认证的路由
      }
    }
    // 其他路由...
  ]
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 检查路由是否需要认证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查用户是否已登录
    const isLoggedIn = // 你的登录状态检查逻辑
    if (!isLoggedIn) {
      // 如果未登录，则重定向到登录页面
      next({
        path: '/login',
        query: { redirect: to.fullPath } // 将原始目标路由作为参数传递
      });
    } else {
      next(); // 已登录，继续访问目标路由
    }
  } else {
    next(); // 不需要认证，继续访问目标路由
  }
});

export default router;

2. 组件内守卫：你可以在路由组件内部使用 beforeRouteEnter 或 beforeRouteEnter 守卫来实现类似的逻辑。

// components/Dashboard.vue
export default {
  data() {
    return {
      // 组件数据
    };
  },
  beforeRouteEnter(to, from, next) {
    // 检查用户登录状态
    const isLoggedIn = // 你的登录状态检查逻辑
    if (!isLoggedIn) {
      // 如果未登录，重定向到登录页面
      next('/login');
    } else {
      next();
    }
  },
  // 其他组件选项...
};

请注意，你需要替换登录状态检查逻辑和路由组件的导入路径以适应你的应用程序。此外，确保你的登录状态逻辑是安全的，并且不会暴露敏感信息。

原文地址：https://blog.csdn.net/m0_67841039/article/details/140253094

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！