首页 / VUE / 权限管理模块中动态加载Vue组件实例详解

权限管理模块中动态加载Vue组件实例详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了权限管理模块中动态加载Vue组件实例详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7360字，纯文字阅读大概需要11分钟。

内容图文

本系列文章并不是手把手的教程，主要介绍了核心思路并讲解了核心代码，完整的代码小伙伴们可以在GitHub上star并clone下来研究。另外，原本计划把项目跑起来放到网上供小伙伴们查看，但是之前买服务器为了省钱，内存只有512M，两个应用跑不起来(已经有一个V部落开源项目在运行)，因此小伙伴们只能将就看一下下面的截图了，GitHub上有部署教程，部署到本地也可以查看完整效果。

项目地址：https://github.com/lenve/vhr

前面几篇文章，我们已经基本解决了服务端的问题，并封装了前端请求，本文我们主要来聊聊登录以及组件的动态加载。

本文是本系列的第五篇，建议先阅读前面的文章有助于更好的理解本文：

1.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(一)
2.SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(二)
3.SpringSecurity中密码加盐与SpringBoot中异常统一处理
4.axios请求封装和异常统一处理

登录状态保存

当用户登录成功之后，需要将当前用户的登录信息保存在本地，方便后面使用。具体实现如下：

登录成功保存数据

在登录操作执行成功之后，通过commit操作将数据提交到store中，核心代码如下：

this.postRequest('/login', {
    username: this.loginForm.username,
    password: this.loginForm.password
}).then(resp=> {
    if (resp && resp.status == 200) {
    var data = resp.data;
    _this.$store.commit('login', data.msg);
    var path = _this.$route.query.redirect;
    _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
    }
});

store

store的核心代码如下：

export default new Vuex.Store({
  state: {
    user: {
      name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
      userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
    }
  },
  mutations: {
    login(state, user){
      state.user = user;
      window.localStorage.setItem('user', JSON.stringify(user));
    },
    logout(state){
      window.localStorage.removeItem('user');
    }
  }
});

为了减少麻烦，用户登录成功后的数据将被保存在localStorage中（防止用户按F5刷新之后数据丢失），以字符串的形式存入，取的时候再转为json。当用户注销登陆时，将localStorage中的数据清除。

组件动态加载

在权限管理模块中，这算是前端的核心了。

核心思路

用户在登录成功之后，进入home主页之前，向服务端发送请求，要求获取当前的菜单信息和组件信息，服务端根据当前用户所具备的角色，以及角色所对应的资源，返回一个json字符串，格式如下：

[
    {
        "id": 2,
        "path": "/home",
        "component": "Home",
        "name": "员工资料",
        "iconCls": "fa fa-user-circle-o",
        "children": [
            {
                "id": null,
                "path": "/emp/basic",
                "component": "EmpBasic",
                "name": "基本资料",
                "iconCls": null,
                "children": [],
                "meta": {
                    "keepAlive": false,
                    "requireAuth": true
                }
            },
            {
                "id": null,
                "path": "/emp/adv",
                "component": "EmpAdv",
                "name": "高级资料",
                "iconCls": null,
                "children": [],
                "meta": {
                    "keepAlive": false,
                    "requireAuth": true
                }
            }
        ],
        "meta": {
            "keepAlive": false,
            "requireAuth": true
        }
    }
]

前端在拿到这个字符串之后，做两件事：1.将json动态添加到当前路由中;2.将数据保存到store中，然后各页面根据store中的数据来渲染菜单。

核心思路并不难，下面我们来看看实现步骤。

数据请求时机

这个很重要。

可能会有小伙伴说这有何难，登录成功之后请求不就可以了吗？是的，登录成功之后，请求菜单资源是可以的，请求到之后，我们将之保存在store中，以便下一次使用，但是这样又会有另外一个问题，假如用户登录成功之后，点击某一个子页面，进入到子页面中，然后按了一下F5进行刷新，这个时候就GG了，因为F5刷新之后store中的数据就没了，而我们又只在登录成功的时候请求了一次菜单资源，要解决这个问题，有两种思路：1.将菜单资源不要保存到store中，而是保存到localStorage中，这样即使F5刷新之后数据还在；2.直接在每一个页面的mounted方法中，都去加载一次菜单资源。

由于菜单资源是非常敏感的，因此最好不要不要将其保存到本地，故舍弃方案1，但是方案2的工作量有点大，因此我采取办法将之简化，采取的办法就是使用路由中的导航守卫。

路由导航守卫

我的具体实现是这样的，首先在store中创建一个routes数组，这是一个空数组，然后开启路由全局守卫，如下：

router.beforeEach((to, from, next)=> {
    if (to.name == 'Login') {
      next();
      return;
    }
    var name = store.state.user.name;
    if (name == '未登录') {
      if (to.meta.requireAuth || to.name == null) {
        next({path: '/', query: {redirect: to.path}})
      } else {
        next();
      }
    } else {
      initMenu(router, store);
      next();
    }
  }
)

这里的代码很短，我来做一个简单的解释：
1.如果要去的页面是登录页面，这个没啥好说的，直接过。

2.如果不是登录页面的话，我先从store中获取当前的登录状态，如果未登录，则通过路由中meta属性的requireAuth属性判断要去的页面是否需要登录，如果需要登录，则跳回登录页面，同时将要去的页面的path作为参数传给登录页面，以便在登录成功之后跳转到目标页面，如果不需要登录，则直接过（事实上，本项目中只有Login页面不需要登录）；如果已经登录了，则先初始化菜单，再跳转。

初始化菜单的操作如下：

export const initMenu = (router, store)=> {
  if (store.state.routes.length > 0) {
    return;
  }
  getRequest("/config/sysmenu").then(resp=> {
    if (resp && resp.status == 200) {
      var fmtRoutes = formatRoutes(resp.data);
      router.addRoutes(fmtRoutes);
      store.commit('initMenu', fmtRoutes);
    }
  })
}
export const formatRoutes = (routes)=> {
  let fmRoutes = [];
  routes.forEach(router=> {
    let {
      path,
      component,
      name,
      meta,
      iconCls,
      children
    } = router;
    if (children && children instanceof Array) {
      children = formatRoutes(children);
    }
    let fmRouter = {
      path: path,
      component(resolve){
        if (component.startsWith("Home")) {
          require(['../components/' + component + '.vue'], resolve)
        } else if (component.startsWith("Emp")) {
          require(['../components/emp/' + component + '.vue'], resolve)
        } else if (component.startsWith("Per")) {
          require(['../components/personnel/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sal")) {
          require(['../components/salary/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sta")) {
          require(['../components/statistics/' + component + '.vue'], resolve)
        } else if (component.startsWith("Sys")) {
          require(['../components/system/' + component + '.vue'], resolve)
        }
      },
      name: name,
      iconCls: iconCls,
      meta: meta,
      children: children
    };
    fmRoutes.push(fmRouter);
  })
  return fmRoutes;
}

在初始化菜单中，首先判断store中的数据是否存在，如果存在，说明这次跳转是正常的跳转，而不是用户按F5或者直接在地址栏输入某个地址进入的。否则就去加载菜单。拿到菜单之后，首先通过formatRoutes方法将服务器返回的json转为router需要的格式，这里主要是转component，因为服务端返回的component是一个字符串，而router中需要的却是一个组件，因此我们在formatRoutes方法中动态的加载需要的组件即可。数据格式准备成功之后，一方面将数据存到store中，另一方面利用路由中的addRoutes方法将之动态添加到路由中。

菜单渲染

最后，在Home页中，从store中获取菜单json，渲染成菜单即可，相关代码可以在Home.vue中查看，不赘述。

OK，如此之后，不同用户登录成功之后就可以看到不同的菜单了。

内容总结

以上是互联网集市为您收集整理的权限管理模块中动态加载Vue组件实例详解全部内容，希望文章能够帮你解决权限管理模块中动态加载Vue组件实例详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/295998.html

来源：【匿名】

【上一篇】加载vue远程代码的组件分享【下一篇】php怎么返回数据给vue

更多 ►

【权限管理模块中动态加载Vue组件实例详解】教程文章相关的互联网学习教程文章

Vue之组件【代码】

组件：一个包含Html,css,js独立的集合体，这样的集合体可以完成页面结构的代码复用可以相对于理解成封装承一个小模块，能够重复方便使用.组件分为根组件，全局组件，局部组件　　根组件: 所有被new Vue（）产生的组件，在项目开发阶段，一个项目只会有一个根组件　　全局组件：不用注册，就可以称为任何一个组件的子组件　　局部组件：必须注册，才可以称为注册该局部组件的子组件局部组件创建一个局部组件1.创...

vue组件之间的通信【代码】

1.子组件给父组件传递数据 <body><div id="app">父组件：{{total}}<br><son-component v-bind:total="total"></son-component></div><script>Vue.component('son-component',{template:'<div>子组件：{{total}}+{{num}}={{add}}</div>',props:{total:Number},data(){return {num:10}},computed:{add:function(){return num=this.total+this.num}}})var app=new Vue({el:'#app',data:{total:1},})</script> </body>通过v-bind动态绑...

vue组件star开发基于vue-cli【代码】

<template><div class="stars"><div v-for="(item,ind) in num" :key="ind" :class="{‘on‘:ind<=cur}" @mouseover=‘enter(ind)‘@mouseleave="out()"@click="ok(ind)"></div></div> </template> <script>export default{name:‘Star‘,data(){return{num:5,cur:-1,flag:false}},methods:{enter(ind){if(!this.flag){this.cur=ind;}},out(){if(!this.flag){this.cur=-1;}},ok(ind){this.flag=true;this.cur=ind; }}} </script> <...

vue组件库（四）：组件功能模块划分

涉及的平台移动端一.公共样式常用变量 var.scss颜色模块主题色、状态色、文本色、灰度色（边框和分隔线）字体字体、大小、行间距 2.控件 3. 三大模块样式、有哪些控件原文：https://www.cnblogs.com/yuxina/p/10173644.html

vue组件化的应用【代码】

前言：vue组件化的应用涉及到vue-cli的内容，所以在应用之前是需要安装node和vue-cli的，具体如何安装我就不一一赘述了。可能一会儿我心情好的时候，可以去整理一下。1、应用的内容：在一个页面中，需要一个固定的内容，这个内容可以多次引用，那么就可以考虑把他分离出来，在下次需要的时候，实现引用就好。比如：<input type="text" v-model="content" > <button @click = addList>添加</button> <ul><li v-for="( item ) of tod...

vue组件双向绑定.sync修饰符的一个坑【代码】

我们知道组件是单项的，但是有时候需要双向，这时候我们可以使用.sync修饰符，但今天遇到一个坑，一直不成功，花了半小时试出来的。。。。在编程的时候我们很习惯冒号后面跟着空格。而.sync双向绑定需要子组件显性触发 this.$emit(‘update:foo‘, newValue)这里的updata:foo可以说是一个名字，不能加空格，不能加空格，不能加空格！！！这就是坑，由于编程习惯，也许会有人加空格，我也是，所以写出来当作一个笔记。根据文档...

vue组件复用时，页面不刷新【代码】

一、 keep-alive包裹的组件，在actived的钩子函数总进行调用。二、在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view。　　当然，我们可以在点击事件上加上router.go(0)，强制刷新整个页面来满足效果，但页面整体的刷新会使体验下降。解决方案有以下几种：1、使用watch方法：当id发生变化时，‘$route‘也会相应地发生变化，因此可以通过wat...

vue 组件传值踩坑日记 1【代码】

今天在用平时很少用到的传值方式，是V2.4以后新加入属性$attrs $listener 以及inheritAttrs.总结：这样形式的代码适合套娃模式的组件传递，却不适合兄弟组件的传值，那样的传值方式，需要创建一个事件总线，说白了就是新new一个空的vue，详见，我的第二篇日志《vue 组件传值踩坑日记 2》废话不多说，直接上代码，大家可以边看注释边测试一下效果吧<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewpo...

Vue组件【代码】

一，Vue组件组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。是可复用的Vue实例。二，组件注册1，全局注册<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"> <global_com></global_com> <global_com></global_com> <global_com></global_com> </div><div id="app1"> <global_com></global_com> </div><script src="vue....

vue 组件库

百度地图：https://github.com/Dafrok/vue-baidu-mapgoogle地图：https://github.com/GuillaumeLeclerc/vue-google-maps高德地图：https://github.com/ElemeFE/vue-amap图表：https://github.com/hchstera/vue-charts原文：http://www.cnblogs.com/znj211985211/p/7132125.html

Vue组件通信【代码】

1. 父子通信父 -> 子 props子 -> 父事件$emit父子传值，涉及到双向绑定的，一般用v-model，子组件使用$emit(‘input‘,data)还有一种是使用props向下传递一个对象，由于对象是一个引用，直接修改对象的属性，可以达到修改父组件值的目的，需要进一步验证。2. 通用通信方案1. Event bus 使用一个Vue实例，或者任意一个PubSub的库作为中心，进行消息通信。例如：let bus = new Vue(); Vue.prototype.bus = bus;bus.$on 订阅事件b...

Vue之组件切换【代码】【图】

一，使用v-if和v-else指令1，定义注册和登陆组件，设置flag标识，默认为true<script>Vue.component(‘login‘, {template: ‘#tmp1‘})Vue.component(‘register‘, {template: ‘#tmp2‘})var vm =new Vue({el: ‘#app‘,data: {flag: true}}) </script>2，在组件中使用v-if，点击按钮的使用切换flag的值<body><div id="app"><a href="#" @click="flag=true">登陆</a><a href="#" @click="flag=false">注册</a><br/><login v-if="...

Vue组件化开发【代码】

目录Vue组件化开发组件化开发：Vue实例方法与属性Vue.extend与Vue.Component全局指定、组件、方法实例：Popup插件的封装Vue组件化开发组件化开发：1、组件化开发指的是将复杂的业务拆分为一个有一个的组件 2、组件化开发的组件一般来说要灵活 3、组件化开发涉及到了Vue的js组件封装，需要掌握Vue基础、Vue实例方法与属性、Vue.extend、Vue插件等知识Vue实例方法与属性vm.$mount(el) 会将当前的组件挂载el元素上，该操作会替换当前的...

【Vue】组件插槽【代码】【图】

注意：2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。父组件模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在自作用域中编译的。插槽分为三类：1.匿名插槽（默认插槽），没有命名有且只有一个2.具名插槽，即slot带有name3.作用域插槽，子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)匿名插槽(默认插槽，name为defau...

Vue——组件参数校验与非Props特性【代码】

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>组件参数校验与非Props特性</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="root"><child :content="‘组件参数校验‘"></child><lastchild :text="‘非Props特性‘"></lastchild></div><script type="text/javascript">Vue.component(‘child‘, {props: {// content: Number// ...

首页 / VUE / 权限管理模块中动态加载Vue组件实例详解

权限管理模块中动态加载Vue组件实例详解

内容导读

内容图文

登录状态保存

登录成功保存数据

store

组件动态加载

核心思路

数据请求时机

路由导航守卫

菜单渲染

内容总结

内容备注

内容手机端

【权限管理模块中动态加载Vue组件实例详解】教程文章相关的互联网学习教程文章

Vue之组件【代码】

vue组件之间的通信【代码】

vue组件star开发基于vue-cli【代码】

vue组件库（四）：组件功能模块划分

vue组件化的应用【代码】

vue组件双向绑定.sync修饰符的一个坑【代码】

vue组件复用时，页面不刷新【代码】

vue 组件传值踩坑日记 1【代码】

Vue组件【代码】

vue 组件库

Vue组件通信【代码】

Vue之组件切换【代码】【图】

Vue组件化开发【代码】

【Vue】组件插槽【代码】【图】

Vue——组件参数校验与非Props特性【代码】

VUE - 相关标签

加载 - 相关标签

实例 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程