VUEルーティングセキュリティ検証

従来のWebページで：

層の後端ビューがユーザの要求によって制御される制御装置の後端に達し、そして、描画データのみ後端が完了された場合にのみわずかな異常無しに安全な、プロセスはフロントエンドビューに戻り

前とプロジェクトの分離が終了した後：

このようなVUEなどのフロントエンドフレームに移し、右ビュースイッチング層、異なる成分のビュー間をナビゲートするためのナビゲーションルートを使用して認証は任意セキュアに限定されるものではない場合、その後、実際には、問題があるユーザブラウザなら手動でアドレスバーに異なる経路は、同じページのジャンプアクションが行われます元々表示するには、ログインした後、ユーザーは、ロギングなしサブページに入ることができるようになり、他の言葉で、

アイデアの実現

目標は、ある、両方が検証を通じて任意のルーティングジャンプする前に許可を確認するために、ルーティングスイッチを制御するためにジャンプのルーティングを可能にし、検証に合格、ログインページへの直接ユーザー

コーディング

ファイルエントリのルータにおいて、経路に続いて判定各子コンポーネント、識別、検証への経路は、以下のように、検証されるマーカ要求が認証されていないログ、およびページレイアウトを要求するために、使用ブロックされます、

ログインしてください、ルーティングジャンプは情報が条件を満たしているかどうかを確認するために、バックエンドユーザーにアクセスするためのユーザ要求の後に発生した時間のフルバックエンドプロセスはバック情報を渡すために、その間、ブラウザ上の永続的な情報、トークンを超えるバックエンドのパスなど、のみジャンプする前に、次のルートは、何のトークンが存在しないことを確認トークンまたはページの正しさを確認し、[OK]をジャンプするかどうかを決定する必要があります

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export const constantRouterMap = [
  {
    path: '/login',
     在这里!!!
    meta: {requireAuth: false},
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      在这里!!!
      meta: {requireAuth: true},
      component: () => import('@/views/dashboard/index')
    }]
  },

JSファイルを導入し、プロジェクト全体のジャンプ、カスタムpermission.js、および入学main.jsをルーティングする前に迎撃を統一

import router from './router'
import store from './store'
import {Message} from 'element-ui'

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 查看请求是否需要认证
    if (store.getters.loginstatus) { // 有权限,继续往下跳转
      next();
      return
    }else{
      Message.error("请您先登录");
      // 不存在role信息就是去登录页
      next('/login');
      return
    }
  } else { // 不需要认证的全部直接放行
    next();
    return
  }
});


router.afterEach(() => {
 // todo 
})