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


Posted in Javascript onDecember 29, 2017

项目地址: vue-simple-template

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

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

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

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

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

技术栈

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-router 的关系是没问题的,这可以说的超级简单的版本,适合初学。上面的内容说的重点,其实也算是项目的全部啦

项目地址: vue-simple-template

总结

以上所述是小编给大家介绍的vue vuex vue-rouert后台项目——权限路由(适合初学),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js操作ajax返回的json的注意问题!
Feb 23 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
js本地图片预览实现代码
Oct 09 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 #Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 #Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 #Javascript
js实现手机web图片左右滑动效果
Dec 29 #Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 #Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 #Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 #Javascript
You might like
php动态生成JavaScript代码
2009/03/09 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
yii实现创建验证码实例解析
2014/07/31 PHP
php session 写入数据库
2016/02/13 PHP
php实现有序数组打印或排序的方法【附Python、C及Go语言实现代码】
2016/11/10 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
理解javascript正则表达式
2016/03/08 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
Python去除字符串两端空格的方法
2015/05/21 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
详解python while 函数及while和for的区别
2018/09/07 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
Python-接口开发入门解析
2019/08/01 Python
Python PO设计模式的具体使用
2019/08/16 Python
利用PyCharm操作Github(仓库新建、更新,代码回滚)
2019/12/18 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
python except异常处理之后不退出,解决异常继续执行的实现
2020/04/25 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python调用C/C++的方法解析
2020/08/05 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
超市重阳节活动方案
2014/02/10 职场文书
2014庆六一活动方案
2014/03/02 职场文书
股权投资意向书
2014/04/01 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
Python 图片添加美颜效果
2022/04/28 Python