VueJS router guards 实现访问控制机制

Question

我的用例是这样的。

我的系统中有主要路线和嵌套路线。
主要路线应在 App.vue 文件内的 <router-view></router-view> 标记中加载，这些 主要路线 应不能加载到其他 vue 组件的任何其他 <router-view></router-view> 标签中。
子路由应该只加载到相关组件的 <router-view></router-view> 标签中。不能加载到其他组件的 <router-view></router-view> 标签中。

我的问题是现在任何人都可以在 url 中输入路由名称并毫无障碍地导航到整个系统，甚至任何人都可以简单地绕过登录并登录系统。

我知道这可以通过使用 beforeeach 路由保护来完成。但是我不知道把这个 beforeeach 函数放在哪里以及如何将它们全部连接起来。谁能告诉我如何实现我的要求。

这是我完整的routes.js文件

//9 root routes

import findYourAccount from './components/find-your-account.vue';
import restPassword from './components/reset-password.vue';
import student from './components/student.vue';
import welcome from './components/welcome.vue';
import admin from './components/admin.vue';
import dataEntry from './components/data-entry.vue';

import resetYourPassword from './components/forgot-password/resetYourPassword.vue';
import emailHasBeenSent from './components/forgot-password/email-has-been-sent.vue';
import noSearchResults from './components/forgot-password/no-search-results.vue';

//student subroutes 7

import buyPapers from './components/student/buyPapers.vue';
import studentDashboard from './components/student/studentDashboard.vue';
import myPapers from './components/student/myPapers.vue';

import startExam from './components/student/startExam.vue';
import QuestionPaper from './components/student/QuestionPaper.vue';
import FinishTheExam from './components/student/viewResults.vue';
import viewTutorProfile from './components/student/viewTutorProfile.vue';

//Admin subroutes 2

import createDataEntryOperators from './components/administrater/createDataEntryOperators.vue';
import adminDashboard from './components/administrater/adminDashboard.vue';

//Data entry subroutes 2

import questionPaperMetaData from './components/data-entry/question-paper-meta-data.vue';
import createExam from './components/data-entry/create-exam.vue';
import createTutorProfile from './components/data-entry/tutor-profile-creation.vue';

export const routes = [
{path:'/findYourAccount',component:findYourAccount},
{path:'/',component:welcome},
{path:'/restPassword',component:restPassword},
{path:'/resetYourPassword',component:resetYourPassword},
{path:'/emailHasBeenSent',component:emailHasBeenSent},
{path:'/noSearchResults',component:noSearchResults},

{path:'/student',component:student, children:[
  {path:'/buyPapers',component:buyPapers},
  {path:'/studentDashboard',component:studentDashboard},
  {path:'/myPapers',component:myPapers},

  {path:'/startExam',component:startExam,name:'startExam'},
  {path:'/QuestionPaper',component:QuestionPaper},
  {path:'/FinishTheExam',component:FinishTheExam},
  {path:'/viewTutorProfile',component:viewTutorProfile, name:'tutorProfile'}
]},
{path:'/admin',component:admin,children:[
  {path:'/createDataEntryOperators',component:createDataEntryOperators},
  {path:'/adminDashboard',component:adminDashboard}
]},
{path:'/dataEntry',component:dataEntry,children:[
  {path:'/createExam',component:createExam},
  {path:'/createTutorProfile',component:createTutorProfile},
  {path:'/questionPaperMetaData',component:questionPaperMetaData}
]}
]
//export default routes

这是我的 App.vue 文件，其中只应加载主要路线。

<template>
  <div class="fluid-container">
    <app-header></app-header>
    <div style="min-height:610px;">
      
      <router-view></router-view>

    </div>

<div>
  <app-footer></app-footer>
</div>

  </div>
</template>

这是我的主要路线之一（学生），其中有嵌套路线。

<template lang="html">
  <div class="">
    <div class="row">
      <div class="col-md-3">

        <ul class="nav flex-column">
          <li class="nav-item">
            <router-link to="/studentDashboard">Dashboard</router-link>
          </li>

          <li class="nav-item">
            <router-link to="/buyPapers">Buy papers</router-link>
          </li>

          <li class="nav-item">
            <router-link to="/myPapers">My papers</router-link>
          </li>

  </ul>
      </div>
      <div class="col-md-9">
        <router-view></router-view>
      </div>

    </div>

  </div>
</template>

Answer 1

BeforeEach guard 应该用在初始化VueRouter 的地方。查看文档：https://router.vuejs.org/en/advanced/navigation-guards.html

要提供路由保护，您需要在 BeforeEach guard 中检查用户类型或权限。要存储整个应用程序的用户权限，您可能需要使用 Vuex:

import store from '../store'
router.beforeEach((to, from, next) => {
 if (to.path === '/admin') {
    if (store.state.user.type === 'student') next('/student')
    next()
 }
})

VueJS router guards 实现访问控制机制

VueJS router guards to implement access control mechanism

vue.js

vue-router

vue-component

vuejs2