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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
如何使用json在前后台进行数据传输实例介绍
Apr 11 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
js生成随机数的过程解析
Nov 24 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
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数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
js动态控制table的tr、td增加及删除的具体实现
2014/04/30 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python3转换code128条形码的方法
2019/04/17 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
python 实现矩阵按对角线打印
2019/11/29 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
财产保全担保书范文
2014/04/01 职场文书
升学宴主持词
2014/04/02 职场文书
安全演讲稿大全
2014/05/09 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
班级文化建设标语
2014/06/23 职场文书
卖房授权委托书样本
2014/10/05 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2014年党总支工作总结
2014/12/18 职场文书
2016年母亲节广告语
2016/01/28 职场文书
初中运动会闭幕词范本3篇
2019/12/09 职场文书
MySQL锁机制
2021/04/05 MySQL
代码复现python目标检测yolo3详解预测
2022/05/06 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers