动态加载权限管理模块中的Vue组件
本文我们主要来聊聊登录以及组件的动态加载。 登录状态保存当用户登录成功之后,需要将当前用户的登录信息保存在本地,方便后面使用。具体实现如下: 登录成功保存数据在登录操作执行成功之后,通过commit操作将数据提交到store中,核心代码如下: {
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});
}
});
storestore的核心代码如下: 为了减少麻烦,用户登录成功后的数据将被保存在localStorage中(防止用户按F5刷新之后数据丢失),以字符串的形式存入,取的时候再转为json。当用户注销登陆时,将localStorage中的数据清除。 组件动态加载在权限管理模块中,这算是前端的核心了。 核心思路用户在登录成功之后,进入home主页之前,向服务端发送请求,要求获取当前的菜单信息和组件信息,服务端根据当前用户所具备的角色,以及角色所对应的资源,返回一个json字符串,格式如下: 前端在拿到这个字符串之后,做两件事:1.将json动态添加到当前路由中;2.将数据保存到store中,然后各页面根据store中的数据来渲染菜单。 核心思路并不难,下面我们来看看实现步骤。 数据请求时机 这个很重要。 可能会有小伙伴说这有何难,登录成功之后请求不就可以了吗?是的,登录成功之后,请求菜单资源是可以的,请求到之后,我们将之保存在store中,以便下一次使用,但是这样又会有另外一个问题,假如用户登录成功之后,点击某一个子页面,进入到子页面中,然后按了一下F5进行刷新,这个时候就GG了,因为F5刷新之后store中的数据就没了,而我们又只在登录成功的时候请求了一次菜单资源,要解决这个问题,有两种思路:1.将菜单资源不要保存到store中,而是保存到localStorage中,这样即使F5刷新之后数据还在;2.直接在每一个页面的mounted方法中,都去加载一次菜单资源。 由于菜单资源是非常敏感的,因此最好不要不要将其保存到本地,故舍弃方案1,但是方案2的工作量有点大,因此我采取办法将之简化,采取的办法就是使用路由中的导航守卫。 路由导航守卫 我的具体实现是这样的,首先在store中创建一个routes数组,这是一个空数组,然后开启路由全局守卫,如下: {
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页面不需要登录);如果已经登录了,则先初始化菜单,再跳转。 初始化菜单的操作如下: {
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,如此之后,不同用户登录成功之后就可以看到不同的菜单了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- c# – 为什么按Ctrl“”会在TextBox中产生一声蜂鸣声?
- React Native 从入门到原理
- XML系列之--Linq操作带属性的XML(四)
- Java设计模式学习记录-组合模式 Java设计模式学
- c# – 用于确定特定范围内有多少元素的数据结构?
- zstack学习笔记1--HEX file content at address 0x4A390 ex
- reactjs – 使用流式手动创建react元素Object
- dijit.byId("grid") is undefined
- c# – PersianCalendar无法将年/月/ 31(日)转换为标准日期
- Extjs中三种不同的数据提交方式