Vue实战篇｜使用路由管理用户权限（动态路由）

权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

跟着我一起来学vue实战篇路由管理权限吧!

getCurrentAuthority()函数用于获取当前用户权限，一般来源于后台数据

check()函数用于权限的校验匹配

isLogin()函数用于检验用户是否登录

路由配置元信息meta:{ authority: ["admin"] }

使用tomatched获取跳转路由的全部信息,包括父路由和子路由

使用lodash中的findLast匹配离跳转路由配置权限的元信息

引入authjs中check()和isLogin()进行判断是否具有权限或是否已登录

如果没有权限则给出提示信息后跳转到403页面,未登录则返回登录页面

运行结果

当getCurrentAuthority()函数返回admin时，则菜单会显示所有元信息meta:{ authority: ["admin"] }的路由菜单；

如返回值为user时，菜单会显示所有元信息meta:{ authority: ["user"] }的路由菜单

接下来CrabFort会带大家一起实现更加精细化的权限设计（权限组件、权限指令）

不会。vuex中watch的使用，在全局路由守卫中想要通过store拿到异步请求的数据是无法拿到的。常见使用vuex，是store模块文件写相关的数据信息。vuex是一个专门为vue，js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

用vue router如何获得当前页面的路由的方法如下：

路由器将自渲染对应的组件以及更新路由信息：

其中<router-view>可以传递props，支持v-ref,同时也可以使用v-transition和transition-mode来获得场景切换效果，被渲染的组件将注册到父级组件的this$对象上。

路由对象和路由匹配：

路由对象，即$router会被注入每个组件中，可以利用它进行一些信息的获取。

如属性 说明：

$routepath 当前路由对象的路径，如'/vi

$routequery 请求参数，如/foouser=1获取到queryuser = 1

$routerouter 所属路由器以及所属组件信息

$routematched 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

$routename 当前路径名字

当然，你也可以在自己定义路由规则（map)的时候自定义字段，用以特殊目的。

这里只是做了一些简单的介绍，最后，更多高级用法请参考官方文档。

内容较多请耐心阅读，你认真读完一定获益匪浅

这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。

"element-plus": "^102-beta70",

"vue": "^300",

"vue-router": "^400-0"

1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。

2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。

3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。

4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。

5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。

Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。

我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。

import { createApp } from 'vue'

import ElementPlus from 'element-plus';

import App from '/Appvue'

import router from '/router'

import '@/unitui/init_routejs'//这是为了实现防止刷新路由丢失

const app = createApp(App)

appuse(ElementPlus)

appuse(router)mount('#app')

// 注册全局组件

import Uicon from '/unitui/sub/Uiconvue'

appcomponent('Uicon',Uicon)

你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改

这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在mainjs文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。

实际效果

这是一个非常重要的内置组件，它主要用于模拟登录时的 *** 作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。

其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：

init_route(route_data) {

//依据后端返回的json数据生成路由

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_datalength; index++) {

//循环后端返回的json

//循环

if (route_data[index]children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index]path, //路由url

name: route_data[index]name, //路由名

component: () => import(`@/${route_data[index]component}`),

// component: (resolve) => require([`@/views/${route_data[index]component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index]metashow_site, //是否全屏显示

web_title: route_data[index]metaweb_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index]childrenlength; i++) {

init_route_data[index]children[i] = {

path: route_data[index]children[i]path, //路由url

name: route_data[index]children[i]name, //路由名

component: () => import(`@/${route_data[index]children[i]component}`),

// component:(resolve) => require([`@/views/${route_data[index]children[i]component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index]children[i]metashow_site, //是否全屏显示

web_title: route_data[index]children[i]metaweb_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index]path, //路由url

name: route_data[index]name, //路由名

component: () => import(`@/${route_data[index]component}`),

// component:(resolve) => require([`@/views/${route_data[index]component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index]metashow_site, //是否全屏显示

web_title: route_data[index]metaweb_title //网站标题

}

};

// consolelog(index);

}

}

// consolelog(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_datalength; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

this$routeraddRoute(init_route_data[index]); //循环添加数组

}

thisinit_menu(); //执行菜单生成方法

},

其他三个你可以随意修改

在vue2动态路由项目之中，在appvue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_routejs写下和loginvue文件中路由初始化相似的内容，然后再mainjs中引入。

init_routejs内容：

import router from '@/router'

function init_route() {

//依据后端返回的json数据生成路由

if (sessionStoragegetItem("route_data") != null) {

const route_data = JSONparse(sessionStoragegetItem("route_data"));

// consolelog(route_data);

const init_route_data = []; //定义一个路由数组储存生成的路由信息

for (let index = 0; index < route_datalength; index++) {

//循环后端返回的json

//循环

if (route_data[index]children != undefined) {

//有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index]path, //路由url

name: route_data[index]name, //路由名

component: () => import(`@/${route_data[index]component}`),

// component: (resolve) => require([`@/views/${route_data[index]component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index]metashow_site, //是否全屏显示

web_title: route_data[index]metaweb_title //网站标题

},

children: [] //嵌套路由

};

for (let i = 0; i < route_data[index]childrenlength; i++) {

init_route_data[index]children[i] = {

path: route_data[index]children[i]path, //路由url

name: route_data[index]children[i]name, //路由名

component: () =>

import(`@/${route_data[index]children[i]component}`),

// component:(resolve) => require([`@/views/${route_data[index]children[i]component}`], resolve), //加载后端json描述的vue文件

meta: {

//路由一些附加信息

show_site: route_data[index]children[i]metashow_site, //是否全屏显示

web_title: route_data[index]children[i]metaweb_title //网站标题

}

};

}

} else {

//没有children时生成路由数组方法

init_route_data[index] = {

path: route_data[index]path, //路由url

name: route_data[index]name, //路由名

component: () => import(`@/${route_data[index]component}`),

// component:(resolve) => require([`@/views/${route_data[index]component}`], resolve), //加载后端json描述的vue文件

meta: {

show_site: route_data[index]metashow_site, //是否全屏显示

web_title: route_data[index]metaweb_title //网站标题

}

};

// consolelog(index);

}

}

// consolelog(init_route_data); //打印生成初始化路由数组

for (let index = 0; index < route_datalength; index++) {

//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加

routeraddRoute(init_route_data[index]); //循环添加数组

}

// 这里放置刷新

// consolelog('app');

// const index=windowlocationhreflastIndexOf("#")

// const url=windowlocationhrefsubstring(index+1,windowlocationhreflength);

// this$routerpush(url)

}

}

init_route()

在mainjs中引用：

import '@/unitui/init_routejs'//这是为了实现防止刷新路由丢失

此时便可完成刷新自动初始化

我们通过在appvue文件中通过获取路由中meta show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。

Appvue源码：

1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdminvue文件中style部分改为：

#sub_admin_back {

width: 100%;

/ 非ui框架将height写为height: 100vh; /

height: 100vh;

background-size: cover;

position: relative;

background-color: #ffffff;

border-radius: 10px;

}

1、没能尽可能减少对框架的干扰，你仍然需要保持对mainjs的适当修改。



首页

问答

综合

首页 > 正文

Vuejs动态路由匹配，为什么不能识别路由参数呢

H5W32021-05-05 17:56:01



如上图，想要实现两个菜单选项共用一个页面，通过路由参数来判断功能从而筛选显示不同的内容。

selectMenu:function(key, keyPath){

consolelog(key);

switch(key){

case '1':this$routerpush('/index');break;

case '2-1-1':this$routerpush({path:'/sale/sureList/0',name:'待确认订单'});break;

case '2-1-2':this$routerpush('/logistics/logisticsList/0');break;

case '2-1-3':this$routerpush({path:'/sale/sureList/',name:'订单管理'});break;

default:break;

上面是菜单控制函数，当我选择待确认菜单时，路由成功匹配到路由中的第一项，status =0。但实际上我在surListvue页面获取路由参数失败，报错：[vue-router] missing param for named route "待确认订单": Expected "status" to be defined

导致界面不能正确渲染，还是原来的确认订单界面，如下图所示（有点丑，为了实现效果）。标题的渲染是根据路由参数来判断显示的。



可耐的小伙伴们，求助求助！

///////////////////////////////////////////////////////////////////////////////////

下面是监听路由情况下打印输出的路由及路由参数



回答：

！！$routepus()使用错误

查看$routepush()用法，发现一般有下面的三种用法，而我原来写的那种路径加名字是不合法的。

试着使用第二种和第三种命名法:this$routerpush({name:'待确认订单',params:{status:'0'}})，成功了。：）要么只push路径path，要么push name和参数status确定路由。

(1)字符串

routerpush('home')

(2)// 对象

this$routerpush({path: '/loginurl=' + this$routepath});

(3)// 命名的路由,后面的参数为动态路由的参数

routerpush({ name: 'user', params: { userId: 123 }})

(4)// 带查询参数，变成/backend/orderselected=2

this$routerpush({path: '/backend/order', query: {selected: "2"}});

回答：

首先，selectMenu方法不建议在跳转路由的时候带有中文的name，或者说路由的定义不建议用中文

其次，你想用path:'/sale/sureList/'时，进入订单管理页，但是路由指向的是待确认订单的路由，并且提示status未定义，所以你可以这样定义路由试试

path: '/sale/sureList'

另外，我做过类似的页面，两个路由指向同一个页面，这个时候在进行页面的切换时，并不会重新挂载，所以获取路由名称方式用mounted方法和watch监听方法一起做。

watch: {

'$route': function (route) {

// 监听路由变化

consolelog("router changed");

let routerName = this$routename;

consolelog(routerName);

}

},

mounted(){

let routerName = this$routename;

consolelog(routerName);

///////////////////////////////////////

简单测试url传递参数输出params：

目标页面接收参数：

目标页面接收参数：

注意：

1、两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏(/page2id=1)。

2、由于动态路由也是传递params的，所以在 this$routerpush() 方法中path不能和params一起使用，否则params将无效。需要用name来指定页面。

以上就是关于Vue实战篇｜使用路由管理用户权限（动态路由）全部的内容，包括:Vue实战篇｜使用路由管理用户权限（动态路由）、vue中路由里会去获取vuex中数据吗、用vue router如何获得当前页面的路由等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！