010到1010的上一篇文章，有同学提到路由认证，但是因为时间关系没有写。本文将具体解释vue，并针对这一特性做出反应。希望同学们看完能受益匪浅，对你的项目有所帮助。这篇文章借鉴了很多大佬的经验。

前言

在单独的项目中，希望根据登录的人，这个人是否有权进入当前页面。虽然服务器有接口的权利，但是每次加载路由都请求这个接口，太浪费了。有时登录权限由SESSIONID验证。

在正式开始react路由认证之前，让我们来看看vue路由认证是如何工作的：

背景

通常，我们会在后端相应地配置路由表角色菜单。当用户直接从地址栏访问未授权范围内的url而不经过页面菜单时，用户将被拦截并重定向到主页。

在vue的初始阶段，可以通过动态路由的方式，根据权限加载相应的路由表AddRouter。但是由于权限的交集，需要对权限路由表进行判断和组合，思考起来相当麻烦，所以采用了beforeEach中直接判断的方法。

使用Vue时，框架提供了路由保护功能，用于进入某条路由前的检查。如果检查失败，它将跳转到404或登录页面，例如Vue中的beforeEnter函数：

.router.beforeEach(async(to，from，next)={ const Topath=to . path；const fromPath=from.path}).1.路由概述

//index . jsimport Vue from ' Vue ' import Router from ' Vue-Router ' import label market from '。/modules/label-market ' import PersonalCenter from '。/模块/个人中心“从导入系统设置”。/modules/system-setting ' import API from ' @/utils/API ' vue . use(Router)const routes=[{ path : '/label '，component :()=import(/* webpackchunkname : ' index ' */' @/views/index . vue ')、Redirect : { name : ' label market ' }、Children 3:[{//基本公共页面路径：' label-market '，name 3: