vue.js - VueJS 路由器守卫实现访问控制机制

Question

我的用例是这样的。

1. 我的系统中有主路由和嵌套路由。
2. 主要路线应加载于 <router-view></router-view> App.vue 文件内的标签和这些主路由 不应加载到任何其他 <router-view></router-view>其他 vue 组件中的标签。
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()
 }
})