这篇文章给大家介绍如何上手vue vuex vue-rouert后台的权限路由，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
项目地址： vue-simple-template
共三个角色：adan barbara carrie 密码全是：123456
adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面（共三个页面）
barbara 拥有 权限B 他可以看到 red 和 yellow 页面
carrie 拥有 权限C 他可以看到 red 和 blue 页面
技术栈
webpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态共享 vue-router ---- 页面路由 babel-polyfill ---- 将ES6代码转为ES5代码 normalize.css ---- 重置掉该重置的样式 element-ui ---- UI组件库
项目初始化
# cd 到项目文件夹 cd weven-simple-template # 安装依赖 （本项目还安装了其他依赖详情 请见 package.json 文件） npm install # 运行项目 npm run dev
项目结构
vue-cil 脚手架初始化项目后，我只修改过src文件夹
src ├── App.vue ---- 页面入口 ├── api ---- api请求 │ └── login.js ---- 模拟json对象数据 ├── assets ---- 主题 字体等静态资源 │ └── logo.png ├── components ---- 组件 │ ├── index.vue │ └── login.vue ├── main.js ---- 初始化组件 加载路由 ├── router ---- 路由 │ └── index.js └── store ---- vuex状态管理 ├── getters.js ├── index.js └── modules └── login.js
重点：
动态路由的关键在于router配置的 meta字段 和vuex的 状态共存 （不懂可以先查看官方文档）
router/index.js
// 初始化路由
export default new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
});
// 动态路由 meta 定义了role
export const powerRouter =[
{ path: '/',redirect:'/red', name: 'index',component: Index,hidden:false,
children: [
{ path: '/red', name: 'red', component: red,},
{ path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}},
{ path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}}
]
}
];store/modules/lo
Logins({ commit }, info){
return new Promise((resolve, reject) => {
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部分
Logins({ commit }, info){
return new Promise((resolve, reject) => {
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);
});
},main.js
router.beforeEach((to, from, next) => {
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
// mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性 ...mapGetters([ 'newrouter' ])
关于如何上手vue vuex vue-rouert后台的权限路由就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
