vue vuex vue-rouert后台项目——权限路由(适合初学)

前端之家收集整理的这篇文章主要介绍了vue vuex vue-rouert后台项目——权限路由(适合初学)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目地址:

共三个角色:adan barbara carrie 密码全是:123456

adan 拥有 最高权限A 他可以看到 red,yellow 和 blue 页面(共三个页面)

barbara 拥有 权限B 他可以看到 red 和 yellow 页面

carrie 拥有 权限C 他可以看到 red 和 blue 页面

技术栈

项目初始化

项目结构

vue-cil 脚手架初始化项目后,我只修改过src文件夹

重点:

动态路由的关键在于router配置的 meta字段 和vuex的 状态共存 (不懂可以先查看官方文档)

router/index.js

store/modules/lo

{ let data={}; loginByUserInfo.map(function (item) { //获取所以用户信息 if(info.username === item.username || info.pew === item.pew){ commit('SET_USERNAME',item.username); //将username和role进行存储 sessionStorage.setItem('USERNAME',item.username); //存入 session commit('SET_ROLE',item.role); sessionStorage.setItem('ROLE',item.role); return data={username:item.username,introduce:item.introduce}; }else{ return data; } }); resolve(data); }).catch(error => { reject(error); }); },Roles({ commit },newrouter){ return new Promise((resolve,reject) => { commit('SET_NEWROUER',newrouter); //存储最新路由 resolve(newrouter); }).catch(error => { reject(error); }); },

gin.js actions部分

main.js

{ if(store.getters.role){ //判断role 是否存在

if(store.getters.newrouter.length !== 0){
next() //resolve 钩子
}else{
let newrouter
if (store.getters.role == 'A') { //判断权限
newrouter = powerRouter
} else {
let newchildren = powerRouter[0].children.filter(route => {
if(route.meta){
if(route.meta.role == store.getters.role){
return true
}
return false
}else{
return true
}
});
newrouter = powerRouter
newrouter[0].children = newchildren
}
router.addRoutes(newrouter) //添加动态路由
store.dispatch('Roles',newrouter).then(res => {
next({ ...to })
}).catch(() => {

})
}
}else{
if (['/login'].indexOf(to.path) !== -1) {
next()
} else {
next('/login')
}
}
})

components/index.vue

此项目拿去 捋清楚 vue+vuex+vue-router 的关系是没问题的,这可以说的超级简单的版本,适合初学。上面的内容说的重点,其实也算是项目的全部啦

项目地址:

总结

以上所述是小编给大家介绍的vue vuex vue-rouert后台项目——权限路由(适合初学)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章