Vue.js VueJS路由器保护以实现访问控制机制

我的用例是这样的

我的系统中有主路由和嵌套路由

主路由应加载到App.vue文件中的

标记中，这些主路由不应加载到其他vue组件中的任何其他

标记中

子路由应仅加载在相关组件的

标记中。不能加载到其他组件的

标记中

我的问题是，现在任何人都可以在url中键入路由名称，并在整个系统中导航，而不存在任何障碍，甚至任何人都可以通过此链接绕过登录并登录到系统

我知道这可以通过在每次之前使用

路线守卫来完成。但我不知道在每个

函数之前把这个

放在哪里，以及如何连接它们。有人能告诉我如何达到我的要求吗

这是我完整的routes.js文件


//9根路由
从“./components/find your account.vue”导入findYourAccount；
从“/components/reset password.vue”导入restPassword；
从“/components/student.vue”导入学生；
从“/components/welcome.vue”导入欢迎；
从“/components/admin.vue”导入管理员；
从“/components/data entry.vue”导入数据条目；
从“./components/Forget password/resetYourPassword.vue”导入resetYourPassword；
导入电子邮件已从“./components/忘记密码/电子邮件已发送。vue”中发送；
从“./components/忘记密码/无搜索结果.vue”导入noSearchResults；
//学生子程序7
从“./components/student/buyPapers.vue”导入购买文件；
从“./components/student/studentDashboard.vue”导入studentDashboard；
从“/components/student/myPapers.vue”导入我的论文；
从“./components/student/startExam.vue”导入startExam；
从“/components/student/QuestionPaper.vue”导入问题纸；
从“/components/student/viewResults.vue”导入FinishTheExam；
从“./components/student/viewTutorProfile.vue”导入viewTutorProfile；
//管理子例程2
从“./components/Administrator/createDataEntryOperators.vue”导入createDataEntryOperators；
从“./components/Administrator/adminDashboard.vue”导入adminDashboard；
//数据输入子例程2
从“/components/data entry/question paper meta data.vue”导入QuestionPaper元数据；
从“./components/data entry/create exam.vue”导入createExam；
从“/components/data entry/tutor profile creation.vue”导入createTutorProfile；
导出常量路由=[
{路径：'/findYourAccount'，组件：findYourAccount}，
{path:'/'，component:welcome}，
{path:'/restPassword'，组件：restPassword}，
{路径：'/resetYourPassword'，组件：resetYourPassword}，
{path:'/emailHasBeenSent'，组件：emailHasBeenSent}，
{path:'/noSearchResults'，组件：noSearchResults}，
{路径：'/student'，组件：学生，子级：[
{路径：'/buyPapers'，组件：buyPapers}，
{路径：'/studentDashboard'，组件：studentDashboard}，
{路径：'/myPapers'，组件：myPapers}，
{路径：'/startExam'，组件：startExam，名称：'startExam'}，
{路径：'/QuestionPaper'，组件：QuestionPaper}，
{path:'/FinishTheExam'，组件：FinishTheExam}，
{路径：'/viewTutorProfile'，组件：viewTutorProfile，名称：'tutorProfile'}
]},
{路径：'/admin'，组件：admin，子级：[
{路径：'/createDataEntryOperators'，组件：createDataEntryOperators}，
{路径：'/adminDashboard'，组件：adminDashboard}
]},
{路径：'/dataEntry'，组件：dataEntry，子项：[
{路径：'/createExam'，组件：createExam}，
{路径：'/createTutorProfile'，组件：createTutorProfile}，
{路径：'/questionPaperMetaData'，组件：questionPaperMetaData}
]}
]
//在每次导出之前导出默认路由
应在初始化VueRouter
的同一位置使用防护装置。签出文档：

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

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