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 相关文章推荐
Prototype框架详解
Nov 25 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
Javascript实现信息滚动效果
May 18 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
php Smarty 字符比较代码
2011/02/27 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
ThinkPHP的SAE开发相关注意事项详解
2016/10/09 PHP
摘自启点的main.js
2008/04/20 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
学习Node.js模块机制
2016/10/17 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python实现图片处理和特征提取详解
2017/11/13 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
Django缓存Cache使用详解
2020/11/30 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
服装采购员岗位职责
2014/03/15 职场文书
项目合作协议书
2014/04/16 职场文书
师范毕业生求职信
2014/07/11 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
如何Python使用re模块实现okenizer
2022/04/30 Python