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结合css实现网页换肤功能
Nov 02 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
js处理表格对table进行修饰
May 26 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
JS轻量级函数式编程实现XDM二
Jun 16 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
asp.net+js 实现无刷新上传解析csv文件的代码
2010/05/17 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
python3中利用filter函数输出小于某个数的所有回文数实例
2019/11/24 Python
用python写爬虫简单吗
2020/07/28 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
护理学应聘自荐书范文
2014/02/05 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2015员工年度考核评语
2015/03/25 职场文书
单位政审意见范文
2015/06/04 职场文书
MySQL 十大常用字符串函数详解
2021/06/30 MySQL