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 相关文章推荐
php析构函数的具体用法小结
Mar 11 Javascript
JavaScript中如何通过arguments对象实现对象的重载
May 12 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 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+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
动态加载js的几种方法
2006/10/23 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
原生js实现日期联动
2015/01/12 Javascript
jquery移动节点实例
2015/01/14 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
jQuery实现自动调用和触发某个事件的方法
2016/11/18 Javascript
jquery 手势密码插件
2017/03/17 Javascript
socket.io学习教程之基础介绍(一)
2017/04/29 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
python实现TCP文件传输
2020/03/20 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
几道PHP的面试题
2012/05/19 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
迎接领导欢迎词
2014/01/11 职场文书
英文自荐信常用句子
2014/03/26 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
单位介绍信格式范文
2015/05/04 职场文书
七年级作文之下雨天
2019/12/23 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
超外差式晶体管收音机的组装与统调
2021/04/22 无线电
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang