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设计一个日历表
Dec 03 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
vue3中的组件间通信
vue前端工程的搭建
vue中data改变后让视图同步更新的方法
vue3如何优雅的实现移动端登录注册模块
开发一个封装iframe的vue组件
如何让vue长列表快速加载
Vue3 Composition API的使用简介
You might like
php Undefined index的问题
2009/06/01 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
jQuery中append()方法用法实例
2014/12/25 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
js实现扫雷源代码
2020/11/27 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python 文件操作实现代码
2009/10/07 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python requests模块实例用法
2019/02/11 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
开学寄语大全
2014/04/08 职场文书
幼儿园课题方案
2014/06/09 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
劳模先进事迹材料
2014/12/24 职场文书
就业推荐表院系意见
2015/06/05 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技