Question

我的用例是这样的。

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

我的问题是现在任何人都可以在网址中键入路由名称，并导航到整个系统，没有任何障碍，即使任何人都可以通过此方式绕过登录并登录系统。

我知道这可以通过使用<router-view></router-view>路线保护来完成。但我不知道在哪里放置beforeeach函数以及如何将它们全部连接起来。有人可以告诉我如何达到我的要求。

这是我完整的 routes.js文件

＆＃13;

beforeeach

＆＃13;

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

＆＃13;

//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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

BeforeEach后卫应该在初始化VueRouter的同一个地方使用。查看文档：{{3}}

为BeforeEach后卫检查用户类型或权限所需的路由提供保护。要存储用户权限整体应用，您可能需要使用 Vuex ：

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

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

1 个答案: