vue vuex vue-rouert后台项目——权限路由（超详细简单版）
2024-10-19 12:36:35
项目地址：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/login.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-router 的关系是没问题的，这可以说的超级简单的版本，适合初学。上面的内容说的重点，其实也算是项目的全部啦
项目地址：vue-simple-template
有什么问题欢迎提问～
最新文章
- nginx、Apache、IIS服务器解决 413 Request Entity Too Large问题方法汇总
- C++ 中堆栈学习
- CSS行高——line-height
- 【Python数据分析】简单爬虫 爬取知乎神回复
- css3 -- 背景图处理
- 【转】MSMQ 微软消息队列 简单 示例
- MSM8909平台 LED背光的控制
- combobox select .change onSelect事件触发
- 判断GPS、网络是否开启
- 函数buf_page_create
- MDI端口和MDIX端口是什么？ 又有什么作用？
- poi-3.11-beta2-20140822.jar操作excel方法
- JavaScript 找出数组中重复的元素
- Delphi Webservice 杂谈
- OS X EI Capitan 10.11.1快速升级方法介绍
- cobol
- python函数调用之自我调用与C++比较
- PhotoSwipe源码解读系列(二)
- CRM-stark组件
- springboot 整合 redis