VueJS路由器保护实现访问控制机制

Question

我的用例就是这样的。

1. 我的系统中有主要路线和嵌套路线。
2. 主路由应该在<router-view></router-view>标记中加载到App.vue文件中，而这些主路由不应该加载到其他vue组件中的任何其他<router-view></router-view>标记中。
3. 子路由应该被加载到相关组件的<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保护应该在初始化VueRouter的相同位置使用。查看文档：https://router.vuejs.org/en/advanced/navigation-guards.html

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

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