vue 用户权限菜单管理之动态路由添加和刷新问题

原创

已于 2022-02-28 23:31:44 修改 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-02-28 23:22:54 首次发布

本文介绍了在Vue.js应用中实现用户权限菜单管理的方法，包括在nodejs+express+mongodb后端设置不同用户的权限规则，将公共和动态路由分开处理，过滤并封装动态路由功能，登录时在vuex中保存用户信息和动态添加路由，以及解决页面刷新后动态路由丢失导致的空白页面问题。

用户权限菜单管理思路：

1.给不同的用户设置不同的权限规则，存在后台的数据库中。

我这里后台用的是nodejs+express+mongodb数据库写的，这里定义了两个用户，一个能访问四个路由地址，另一个能访问两个。

2.在vue-router中将公告路由和有权限的路由表区分。

我是将公共路由和动态添加的路由表分成两个JS文件写的（分模块）

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store/index'

Vue.use(VueRouter)

// 公共路由表  只留一个登录页，保证用户都能访问到
const routes = [
  {
    path: '/login',
    meta: {title:'登录页'},
    component: () => import( '@/views/Login.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


//将所有涉及到的权限路由都添加在这个文件，主要依靠meta路由元信息中定义的role属性区别!!!!  
//举例
  
{
     path: '/home/goout',
     meta: {role:'goout'},
     component: () => import( '@/views/Home/Goout.vue')
},