技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vue.js などのシングル ページ アプリケーション (SPA) フレームワークでは、ルート ガードはルートへのアクセスを制御できる非常に便利な機能です。 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) =
                                   

                    上一篇
                    下一篇