vue中三级导航的菜单权限控制


Posted in Vue.js onMarch 31, 2021

把路由表的数据结构和后端沟通好,然后后端把对应权限的路由树给前端返回,前端在vuex中处理处理路由

import Cookies from 'js-cookie'

import router from '@/router'

import userInfos from '@/api/login'
import date from '../modules/user'
const Layout = () =>
  import ('@/layout') // 全局组件

const _import = require('@/router/_import_' + process.env.NODE_ENV)
const state = {
  routers: sessionStorage.getItem('navRouters')
        ? sessionStorage.getItem('navRouters')
        : [],
  navRouters: sessionStorage.getItem('navRouters')
        ? sessionStorage.getItem('navRouters')
        : [],
}
const mutations = {
  // 菜单权限
  SET_ALL_MENU_LIST(state, menulist) {
    state.navRouters = menulist
    state.routers = menulist
  }
}
onst actions = {
  // 菜单获处理
  setAllMenuList({ commit }, userInfo) {
    /**
         * 初始化路由
         * @param router 路由文件,是一个数组
         */
    function initRouter(router) {
      for (let i = 0; i < router.length; i++) {
        const route = router[i]
        // 设置一级路由的控件为全局定义的默认控件
        route.component = Layout
        // 设置子路由
        route.children && initChildrenRouter(route.children)
      }
      return router
    }
    /**
         * 初始化子路由
         * @param router 子路由数组
         */
    function initChildrenRouter(router) {
      for (let i = 0; i < router.length; i++) {
        const route = router[i]
        // 初始化子路由的控件
        route.component && (route.component = _import(route.component))
        route.children &&
                    route.children.length &&
                    initChildrenRouter(route.children)
      }
    }
    return new Promise((resolve, reject) => {
      userInfos
        .postGetUserRoutes(date.state.userId)
        .then(response => {
          const { result, code } = response
          if (code === 200) {
            if (result.length) {
              result.forEach(v => {
                for (let i = 0; i < v.children[0].children.length; i++) {
                  if (!v.children[0].children[i].hidden === true) {
                    v.redirect =
                         v.path +
                           '/' +
                           v.children[0].path +
                           '/' +
                         v.children[0].children[i].path
                    break
                  }
                }
              })
            }
            const accessedRouters = initRouter(result)
            console.log('accessedRouters', accessedRouters)
            accessedRouters.push({
              path: '*',
              redirect: '/404',
              hidden: true
            })
            router.addRoutes(accessedRouters)
            sessionStorage.setItem(
              'navRouters',
              JSON.stringify(accessedRouters)
            )
            sessionStorage.setItem(
              'allMenuList',
              JSON.stringify(accessedRouters)
            )
            commit('SET_ALL_MENU_LIST', accessedRouters)
            resolve()
          } else {
            reject(response.data)
          }
        })
        .catch(error => {
          reject(error)
        })
    })
  }
}

为了防止刷新丢失,在路由守卫中要加一层条件

const hasGetUserInfo = store.getters.name
            if (hasGetUserInfo) {
                // 处理最新路由
                console.log('00', to)
                if (!isAddTrue) {
                    isAddTrue++
                    store.dispatch('app/setAllMenuList', '').then(() => {
                        console.log('00', to)
                        next({ path: to.path })
                    })
                } else {
                    next()
                }
            } else {
                try {
                    // get user info
                    await store.dispatch('user/getInfo')

                    next()
                } catch (error) {
                    // remove token and go to login page to re-login
                    await store.dispatch('user/resetToken')
                    Message.error(error || 'Has Error')
                    next(`/login?redirect=${to.path}`)
                    NProgress.done()
                }
            }
        }
Vue.js 相关文章推荐
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue组件vue-esign实现电子签名
Apr 21 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
You might like
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
Redis构建分布式锁
2017/03/28 PHP
javascript中的new使用
2010/03/20 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
详解react、redux、react-redux之间的关系
2018/04/11 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
对python GUI实现完美进度条的示例详解
2018/12/13 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python 动态调用函数实例解析
2019/10/21 Python
PyTorch的torch.cat用法
2020/06/28 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
新闻专业推荐信范文
2013/11/20 职场文书
师范大学应届生求职信
2013/11/21 职场文书
教师个人剖析材料
2014/02/05 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
销售辞职信范文
2015/03/02 职场文书
公司借条范本
2015/05/25 职场文书
红与黑读书笔记
2015/06/29 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python