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

Question

我的用例是这样的。

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

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

我知道这可以通过使用beforeeach路线防护来完成。但是我不知道将这beforeeach函数放在哪里以及如何将它们全部连接起来。有人可以告诉我如何实现我的要求吗？

这是我的完整路线.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()
}
})