Project1_07_过渡1_Vue中的动态导航和动态路由绑定&前端按钮权限粒度管理

最新推荐文章于 2022-11-03 23:00:00 发布
最新推荐文章于 2022-11-03 23:00:00 发布
阅读量367 收藏
点赞数
分类专栏： vue学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41368113/article/details/119157235
版权

一、项目环境

  1. 前端技术栈：Vue-Cli
  2. 前端软体：WebStorm 2020.3
  3. 前端样式: Bootstrap； Element-UI

二、文章主题

  1. 内容概述：为将Project07与SpringSecurity/Shiro+jwt整合，主要参考了MarkerHub_前后端分离后台管理系统进行改写。本文是关于该视频P16内容的学习整理。VueX相关内容参考：不良人_VueX
  2. 项目源码：shoppingProject01_pub : version7.1
    注：目前前端界面已初步搭建完成，运行前端项目后，可供参考的地址分别为登录展示及内容展示。
    已实现的前端页面如图1所示：
    在这里插入图片描述
图1 前端页面展示

(1) 左侧为导航栏，期望用户有三种角色(admin，vip，normal)，不同角色进入商城时左侧应具有不同的导航栏显示，如admin可以看到“商品管理、用户管理、订单查询”，而其他角色不行。

(2) 为此，需要动态获取左侧导航栏的条目并对各条目进行动态路由绑定。如此，不具有访问权限的用户左侧将不会显示对应条目，在地址栏输入受限路由地址也不会跳转到相应的界面。
4. WebStorm项目相关目录结构如图2所示
在这里插入图片描述

图2 相关目录结构展示

三、实现过程

Step1：mock.js模拟后端发送过来的数据

Mock.mock('/menu/nav','get',()=> {

  let nav = [
    {
      title: '商品',
      name: 'item',  // 用于高亮
      icon: 'el-icon-s-shop',
      component: '',
      path: '',
      children: [
        {
          title: '商品列表',
          name: 'itemList',
          icon: 'el-icon-s-goods',
          component: 'sys/item/itemList',
          path: '/itemList',
        },
        {
          title: '会员福利',
          name: 'itemVip',
          icon: 'el-icon-s-management',
          component: 'sys/item/itemVip',
          path: '/itemVip',
        },
        {
          title: '商品管理',
          name: 'itemContro',
          icon: 'el-icon-s-finance',
          component: 'sys/item/itemContro',
          path: '/itemContro',
        }
      ]
    },
    {
      title: '用户',
      name: 'user',
      icon: 'el-icon-s-custom',
      component: '',
      path: '',
      children: [
        {
          title: '用户排行榜',
          name: 'userRank',
          icon: 'el-icon-s-check',
          component: 'sys/user/userRank',
          path: '/userRank',
        },
        {
          title: '用户管理',
          name: 'userContro',
          icon: 'el-icon-s-finance',
          component: 'sys/user/userContro',
          path: '/userContro',
        }
      ]
    },
    {
      title: '订单',
      name: 'order',
      icon: 'el-icon-s-finance',
      component: '',
      path: '',
      children: [
        {
          title: '订单查询',
          name: 'orderList',
          icon: 'el-icon-s-finance',
          component: 'sys/orderList',
          path: 'orderList',
        }
      ]
    }
  ]

  let authoritys = []

  Result.data = {
    nav: nav,
    authoritys: authoritys
  }
  return Result
})
// 即发送的是导航栏信息和用户权限信息

Step2：动态路由绑定

router–>index.js 中硬绑定的路由内容如下（注释内容）：
注： 该文件的主要目的是当用户点击左侧导航栏条目时，小页面可以跳转到相应的自定义页面，由下面讨论的SideMenu.vue文件可知，用户点击左侧导航栏点击时点的是path路径，而当前文件的目的就是将path路径与文件夹下相应的自定义页面进行绑定（即path与component的绑定）

import Vue from 'vue'
import Router from 'vue-router'

// 这里先是引用全局axios而非自定义axios
import axios from "axios";
import store from "../store"

Vue.use(Router)

const router =  new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('../views/Home'),
      children: [
        {
          path: '/userCenter',
          name: 'UserCenter',
          component: () => import('../views/user/userCenter')
        },
        {
          path: '/index',
          name: 'Index',
          component: () => import('../views/Index')
        },
    //     {
    //       path: '/itemContro',
    //       name: 'ItemContro',
    //       component: () => import('../views/sys/item/itemContro')
    //     },
    //     {
    //       path: '/itemList',
    //       name: 'ItemList',
    //       component: () => import('../views/sys/item/itemList')
    //     },
    //     {
    //       path: '/itemVip',
    //       name: 'ItemVip',
    //       component: () => import('../views/sys/item/itemVip')
    //     },
    //     {
    //       path: '/userContro',
    //       name: 'UserContro',
    //       component: () => import('../views/sys/user/userContro')
    //     },
    //     {
    //       path: '/userRank',
    //       name: 'UserRank',
    //       component: () => import('../views/sys/user/userRank')
    //     },
    //     {
    //       path: '/orderList',
    //       name: 'OrderList',
    //       component: () => import('../views/sys/orderList')
    //     }
      ]},
    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/Login')
    },
    {
      path: '/mailReg',
      name: 'MailReg',
      component: () => import('../views/user/mailReg')
    },
    {
      path: '/nickReg',
      name: 'NickReg',
      component: () => import('../views/user/nickReg')
    }
  ]
})

在router --> index.js中增加如下方法：

// 在路由加载之前的判定（因为我希望不同角色的用户看到不同的导航栏）
router.beforeEach((to,from,next)=>{
  
  // 这一步是为了判断是否之前已经加载了路由，避免重复加载，store中的menus中的hasRoute方法之后进行讨论
  let hasRoute = store.state.menus.hasRoute

  if ( !hasRoute ) {
    
    axios.get("/menu/nav",{
      headers: {
        Authorization: localStorage.getItem("token")  // 这里是因为我要集成jwt和SpirngSecurity，token信息在用户登录后必携带于请求头
      }
    }).then(res => {

      console.log(res.data.data)

      // 拿到menuList，存在store中。store是vuex的内容，用于管理全局的数据、更新数据，方便各组件进行调用和修改
      store.commit("setMenuList",res.data.data.nav)

      // 拿到用户权限(目前不做处理)
      store.commit("setPermList",res.data.data.authoritys)

      // 动态绑定路由
        // 方法是新建一个newRoutes，之后加入到始祖路由router中
      let newRoutes = router.options.routes
      res.data.data.nav.forEach(menu => {     // 见上方mock.js中发送过来的信息，menu是父条目，父条目没有对应的路由
        if ( menu.children ) {
          menu.children.forEach(e => {        // 对于父条目中的每一个子条目
            // 转成路由, 定义方法 menuToRoute，将子条目中的路由抽取出来形成真实的路由（主要是component转换如' @/views/sys/item/itemList.vue '）
            // 意思是 src目录下的views目录下的sys目录下的item目录下的itemList组件
            let route = menuToRoute(e) 

            // 把路由添加到路由管理中
            if (route) {
              newRoutes[0].children.push(route)  // 获取的每一个route都会在始祖routes的第一个route的children中填充
            }
          })
        }
      })
      console.log("newRoutes")
      console.log(newRoutes)
      router.addRoutes(newRoutes)  // 始祖route中加入获取到的所有路由

      hasRoute = true              // 这个flag为了下次页面刷新时，不用重复进行动态路由绑定
      store.commit("changeRouteStatus",hasRoute) // flag加到公共store的changeRouteStatus方法中
    })
  }

  next()                           // 放行，始祖路由可以开始工作了
})

// 导航转成路由
const menuToRoute = (menu) => {
  if ( !menu.component ) {     // 像主条目没有route，这里就直接返回空值
    return null
  }
  let route = {               // 获取到了一个完整的route
    name: menu.name,
    path: menu.path,
    meta: {                   // 这里是加载但在本文件下不需要的信息
      icon: menu.icon,
      title: menu.title
    }
  }

  route.component = () => import('@/views/'+ menu.component +'.vue')  // 形成真实的route中的component
  return route
}

Step3：动态获取导航栏

在views==>inclu==>SideMenu.vue中的代码如下：
注：该文件的主要目的是展示左侧导航栏信息

<template>

  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">

    <router-link to="/index">
      <el-menu-item index="1-1">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </template>
      </el-menu-item>
    </router-link>

    <el-submenu :index="menu.name" v-for="menu in menuList">
      <template slot="title">
        <i :class="menu.icon"></i>
        <span>{{ menu.title }}</span>      <!-- 当前父条目的标题 -->
      </template>

      <router-link :to="thing.path" v-for="thing in menu.children">    <!-- 与router合作，点击时切换小页面 -->
        <el-menu-item :index="thing.name">                   <!-- 当前子条目的name，name的作用是点它时点亮 -->
          <template slot="title">
            <i :class="thing.icon"></i>
            <span slot="title">{{ thing.title }}</span>       <!-- 当前子条目的标题 -->
          </template>
        </el-menu-item>
      </router-link>
    </el-submenu>

  </el-menu>

</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {
    }
  },
  computed: {               // 为什么在computed获取menuList？
      menuList: {           // 因为computed中可以持续的获取当前页面中的menuList信息进行渲染，防止页面渲染完成后才获取到数据导致页面无法显示数据
        get() {
          return this.$store.state.menus.menuList   // 接下来我们讨论store
        }
      }
  },
  methods: {

  }
}
</script>

<style scoped>

.el-menu-vertical-demo {
  height: 100%;
}

</style>

Step4：Vuex中的存储

在 store–>index.js中的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import menus from "./modules/menus"

Vue.use(Vuex); // 配置内置vue注册vuex状态管理


const store =  new Vuex.Store({
  state: {
    token: ''                              // 存储jwt令牌信息(本次不讨论)
  },
  mutations: {
    SET_TOKEN: (state, token) => {         // 设置jwt令牌信息的方法(本次不讨论)
      state.token = token
      localStorage.setItem("token",token)
    },
    resetState: (state) => {               // 用户logout时清楚令牌信息(本次不讨论)
      state.token = ''
    }
  },
  actions:{

  },
  modules:{
    menus                                  // 主要看这里，加载了menus模块，该文件也import了modules文件夹下的menus
  }


});

export default store;

在 store–>modules–>menus.js中的代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex); // 配置内置vue注册vuex状态管理


export default{
  state: {
    menuList: [], // menuList，由mock.js发到前端，在router->index.js中获取并存储（router->index.js也用它绑定动态路由了），在SideMenu使用
    permList: [],
    hasRoute: false // 是否已动态绑定路由的判决flag，在router->index.js中使用
  },
  mutations: {
      setMenuList(state,menus) {  // 获取menus，存储到当前的menuList中
          state.menuList = menus
      },
      setPermList(state,perms) {
          state.permList = perms
      },
      changeRouteStatus(state,hasRoute) {  // 获取flag，存储到当前hasRoute中，
      state.hasRoute = hasRoute           // 此外 sessionStorage.setItem("hasRoute",hasRoute)防止页面刷新时动态绑定的路由丢失
      sessionStorage.setItem("hasRoute",hasRoute)
     }
  },
  actions:{

  }

}

四、前端按钮权限细粒度管理

Step1： src目录下，定义文件globalFun.js实现全局皆可调用，代码如下：

import Vue from "vue"

Vue.mixin({
  methods: {
      hasAuth(perm) {
        var authority = this.$store.state.menus.permList
        return authority.indexOf(perm) > -1
      }
  }
})

Step2：在main.js中注册globalFun.js，如图3所示
在这里插入图片描述

图3 main.js中注册globalFun.js

Step3：使用方法

在itemVip.vue组件中添加如下v-if判断条件：

在这里插入图片描述

图4 itemVip.vue组件中实现按钮权限细粒度管理

此时，前端界面如图5所示：

在这里插入图片描述

图5 用户无权限时，itemVip.vue组件的前端页面展示情况

若在mock.js中添加如下权限编码段： 
Mock.mock('/menu/nav','get',()=> {

  let nav = [...]

  let authoritys = ['sys:user:vipbutton','sys:user:adminbutton']   // 这里

  Result.data = {
    nav: nav,
    authoritys: authoritys
  }

  return Result
})

此时，前端界面如图6所示：
在这里插入图片描述

图6 用户有权限时，itemVip.vue组件的前端页面展示情况

salieri97
关注
专栏目录
前端框架-Vue
AyinMars的博客
03-25 6297
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
vue框架使用
最新发布
qq_45645848的博客
01-11 1174
前端vue基础知识总结，汇总
vue实现动态导航与动态路由绑定，并使用mock模拟数据实现
小爽帅到拖网速的博客
04-30 1560
动态导航与动态路由绑定 在页面中左侧的菜单栏的数据是写死的，在实际场景中我们不可能这样做，因为菜单是需要根据登录用户的权限动态显示菜单的，也就是用户看到的菜单栏可能是不一样的，这些数据需要去后端访问获取。 前言 导航栏菜单的数据会根据用户的不同会有不一样的展示 路由跟导航同时进行一个动态绑定，每个用户看到的导航是不一样的，对应的路由也可能是不一样的 比如说用户只有用户管理权限，但是修改路径localhost:8080/sys/roles 还是能跳转进去，这是不被允许的 解决方法 1、有多少导航就加载多少路由
vue权限细粒化控制
laoli815的博客
02-25 512
vue按钮功能权限细粒化控制
vue-element-admin 路由动态绑定
codipy的博客
08-18 613
vue-element-admin 实现 后端接口 获取菜单, 然后动态绑定到 左侧菜单.
Vue中路由导航三种方式
weixin_42649842的博客
10-20 1505
1.使用a标签的href实现页面跳转。 跳转 2.使用声明式导航router-link 跳转 3.使用编程式导航 router.push() <div @click=“Goto()”>跳转 友情提醒：this.route和this.route和this.route和this.router的区别 在Vue中this.route是路由[参数对象]，所有路由中的参数params，qu...
SpringBoot + Shiro + Mybatis-plus + Kaptcha + vue实现权限管理、动态路由菜单、登录功能
黑胡子大叔的博客
05-11 3846
登录功能 使用到的技术 shiro Mybatis-plus Springboot 引入依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dep
vue 快速入门
lucien_ma的博客
10-25 298
Vue Soc：关注度分离原则 HTML+ CSS + JS: 视图：给用户看，刷新后台给的数据 网络通信：axios 页面跳转：vue-router 状态管理：vuex Vue-UI：ICE 前端的打包工具：webpack NPM：项目综合管理工具，类似于 maven 我的第一个 vue 程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&gt
狂神说 Vue 笔记
星落无尘的博客
11-10 2780
Vue（读/vju/,类似于view）是一套用于构建用户界面的渐进式框架，发布于2014年2月，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层，不仅易上手，还便于与第三方库（如：vue-router:跳转，vue-resource:通信，vuex：管理）或既有项目整合。 官网：https://cn.vuejs.org/v2/guide/ 开发者：尤雨溪 Vue.js 的 API 是参考了AngularJS、KnockoutJS、R...
Vue项目创建及用法
qq_26866883的博客
12-25 915
VUE项目创建 Vue项目创建方法一 安装node.js 官网下载：https://nodejs.org/en/ 查看node js版本：node -v 查看npm版本：npm -v npm切换到淘宝镜像方式 npm config set registry https://registry.npm.taobao.org 检查镜像配置是否生效 ：npm config list 安装vue-cli脚手架 npm install vue-cli -g 创建vue项目 vue init webpack Xxx Pr
Vue2.0用户权限控制解决方案
11-07
Vue2.0用户权限控制解决方案 用addRoutes实现动态路由 可按要求显示对应的
vue-router 按需加载 component: () => import() 出现错误
热门推荐
pengjunlee的博客
08-28 5万+
vue-router 按需加载 vue的单页面（SPA）项目,必然涉及路由按需的问题。以前我们是这么做的。 // require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require('../component/Login.vue'))); ...
关于vue2中vue-router的使用
weixin_44693550的博客
08-31 3812
vue2中vue-router的使用
VUE动态路由加载坑
OUalen的博客
04-20 1725
动态路径不能使用 component:() => import(`@${item.component}`) 也不能这样 正确方式 路径前部分必须有固定路径。 @/view/
Java 之SpringBoot+SpringSecurity+Vue实现后台管理系统的开发【一、前端】
程序员猫爪
05-24 7153
一、前端项目搭建 1、项目初始化 安装 vue可视化 npm install --g vue-cli 打开vue的的可视化管理工具页面 vue ui 访问该地址： 访问成功 使用Hbuilder打开项目 2、实现相关依赖的安装 安装 element-ui yarn add element-ui 安装成功 引入element-ui import Vue from 'vue' import App from './App.vue' import router from './r
动态导航与动态路由绑定
爱哭的毛毛虫的博客
11-15 1990
1、获取路由之前先进行用户导航数据的加载。 2、进行导航菜单和路由动态绑定。 3、获取路由访问页面
vue-router的配置与简单使用
L_Zzzzz的博客
05-19 262
什么是vue-router？ 因为vue是一个适合做SPA单页面的 框架，所以要实现（模拟）页面（组件）切换，就需要vue-router这个插件,而vue-router 这个插件并不是vue本身自带的东西，而是类似于第三方库的一种存在，所以在使用vue-router 之前需要去安装vue-router这个插件，又因为它是一个插件，所以需要安装在vue上，则使用vue.use 这个API 将插件安装到vue上。这样就可以在vue项目里面使用vue-router了 import Vue from 'vue'
vue左侧导航栏动态绑定路由，换成横向动态导航栏，并改布局
qq_42434039的博客
12-17 2433
1.静态导航栏 <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> 无下拉的菜单 <el-submenu index="2"> 下拉菜单 <template slot="title">我的
二十三、SpringBoot + Jwt + Vue 权限管理系统 （3）
Daniel的博客
11-03 1110
一步一步来，不要急躁哦！！ 当时显示： 这个路由问题我提供两个解决方案：这里我们使用第二种解决方案，这类简单点，后续我们再开发页面的时候就不需要去改动路由，可以动态绑定。综上，我们把加载菜单数据这个动作放在router.js中。Router有个前缀拦截，就是在路由到页面之前我们可以做一些判断或者加载数据。src/router/index.js 这样我们才能绑定添加到路由。所以我会修改mock中的nav的数据成这样： 注意这两个的引入哦！ 最后效果如下： 上面做完之后，总还觉得少
Vue动态路由与Springsecurity权限控制详解
"本文主要探讨了Vue框架中的动态路由配置以及如何在Springsecurity框架下实现按钮级别的权限控制。通过具体的代码实例，展示了如何利用Vue的导航守卫、Vuex状态管理以及Springsecurity的安全机制来达到这两项目标。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值