全国咨询热线:18720358503

微信小程序来了_动态加载权限管理模块中的Vue组

类别:企业动态 发布时间:2021-01-08 浏览人次:

动态加载权限管理模块中的Vue组件     投稿:laozhang   本篇文章给大家详细讲解了如何在权限管理模块中动态的加载VUE组件的过程,有这方面需求的朋友跟着学习下吧。

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

登录成功保存数据

mit操作将数据提交到store中,核心代码如下:

this.postRequest('/login', {
 username: this.loginForm.username,
 password: this.loginForm.password
}).then(resp= {
 if (resp resp.status == 200) {
 var data = resp.data;
 _this.$mit('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);
 mit('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或者直接在地址栏输入某个地址进入的。否则就去加载菜单。拿到菜单之后,ponent是一个字符串,而router中需要的却是一个组件,因此我们在formatRoutes方法中动态的加载需要的组件即可。数据格式准备成功之后,一方面将数据存到store中,另一方面利用路由中的addRoutes方法将之动态添加到路由中。

菜单渲染

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

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


下一篇:没有了

推荐阅读

微信小程序来了_动态加载权限管理模块中的Vue组

动态性载入管理权限管理方法控制模块中的Vue部件 文章投稿:laozhang 当客户登陆取得成功以后,必须将当今客户的登陆信息内容储存在当地,便捷后边应用。实际完成以下:登陆取...

2021-01-08
关于网站外链的几种优化形式!

针对做seo的制造行业来讲,每日都是曝露出外链,但外部链接中有哪些样的表述,你清晰吗?它大概可分成五类型型。 1.锚文本外部链接它是净重最大的外部链接。假如您推送外部链接...

2021-01-08
如何制作白底图-凡科抠图为杂志人像摄影做后期

Photoshop为杂志期刊人像图片拍摄做中后期精修实例教程 公布 创作者:佚名 我想评价关键解读怎样精修涉及到到包装印刷的杂志期刊人像图片片。由于是脸部高清组图,技术专业模...

2021-01-08
防盗门系统网站建设解决方案

防盜门系统软件企业网站建设处理计划方案  防盜门系统软件企业网站建设大部分都归属于宣传策划型网站、营销推广型网站。公账司总体品牌形象详细介绍,商品和服...

2021-01-08
怎么利用微信小程序来挣钱?利用微信赚钱的6种

怎么利用微信小程序来赚钱?任何新鲜事物的风行,必定会引起广泛的盈利效应,对于小程序而言更是如此,首先,微信小程序的开发是具备极高的要求的,六盘水蒲科达网络专注于涉...

2021-01-08
Seo实战经验中论坛签名对网站优化的作用

谢谢大伙儿关心《Seo实战演练工作经验中社区论坛签字对seo优化的功效》话题讨论,搜易高新科技()投身公司企业网站建设、网络推广服务1六年,针对《Seo实战演练工作经验中社区论坛...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信