文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

权限管理模块中动态加载Vue组件怎么实现

2023-06-19 12:48

关注

本篇内容介绍了“权限管理模块中动态加载Vue组件怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

登录状态保存

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

登录成功保存数据

在登录操作执行成功之后,通过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.如果要去的页面是登录页面,这个没啥好说的,直接过。

如果不是登录页面的话,我先从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中查看,不赘述。

“权限管理模块中动态加载Vue组件怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯