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下判断一个元素是否存在的代码
Mar 05 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
Oct 09 Javascript
js实现文字滚动效果
Mar 03 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
vue.js全局API之nextTick全面解析
Jul 07 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
vue 设置路由的登录权限的方法
Jul 03 Javascript
SVG实现时钟效果
Jul 17 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代码简化
2010/02/08 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
2016/12/23 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
Python的SQLAlchemy框架使用入门
2015/04/29 Python
Python实现TCP/IP协议下的端口转发及重定向示例
2016/06/14 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
安全教育月活动总结
2014/05/05 职场文书
小学生倡议书范文
2014/05/13 职场文书
村党支部公开承诺书
2014/05/29 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android