vueルートの守備、フロントエンドページのアクセス権限を制限する例

今日はVueチェック登録状態について書きます。不法登録ならログインページに遷移するロジックです。
まず、ルーティング・ガードを書く必要があります。その原理はルートが変わるたびに、具体的な書き方をトリガすることです。

router.beforeEach((to, from, next) => {
  next()
})

beforeEach関数には三つのパラメータがあります。
ト：まもなく入るルートの対象
from:現在のナビゲーションが出発するルート
next、パイプの中の一つのフックを行います。もし実行が完了したら、ナビゲーションの状態はconfirmedです。そうでないとfalseです。ナビゲーションを終了します。
使用例
ログイン機能を制限して、具体的な構想を実現します。ジャンプルートごとにローカルlocastrage.getItem('token')の状態を判断します。
まずrouter/index.jsを見つけました。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
 
const router = new Router({
 routes: [{
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  },
  {
   path: '/login',
   name: 'login',
   component: login
  }
 ]
})
//      
router.beforeEach((to, from, next) => {
 let token = localStorage.getItem('token') 
 if (to.path == '/login') {
  next()
 } else {
  if (token == '' || token == null) {
   next('/login');
  } else {
   next()
  }
 }
 
})
 
export default router;

index.jsは上記のように作成し、new Routerの対象をconst routerで受け取り、最後にexportが暴露されました。
router.beforeEachはルーティングごとにジャンプします。
let token=local Straget.getItem（'token'）取得ローカルにtokenがないとlocal Strage.getItemページにジャンプする単純な論理
上记のこのvueルートの守护、先端ページのアクセス権限を制限する例は小编が皆さんに提供した内容の全てです。