基于vue实现网站前台的权限管理(前后端分离实践)


Posted in Javascript onJanuary 13, 2018

Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习。
Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试。学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering、Component System、Client-side Routing、Vue-resource、Axios以及视项目大小而决定是否使用的Vuex,学习vue事小,主要转变思维,面向前后端分离的组件式web开发才是真正想去实践的。

正好我的个人网站CodeSheep最近要开发后台管理,因此正好用vue这一套来实现了一下。说到后台管理,绕不开的问题就是权限的管理。既然想实践前后端分离这种思想,因此后台管理的所有web前端的东西应该独立由前端完成,这其中就包括很重要的由前端来根据权限进行相关东西的控制。我们想要做到的是:不同的权限对应着不同的路由,同时页面侧边栏也应该根据不同的权限,来异步生成对应的菜单,讲白了就是后台管理时不同权限的用户其看到的界面菜单是不一样的,因此有了这里实现登录和权限验证的一套流程。
具体实现

1、点击“登录”按钮触发登录事件

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
 this.$router.push({ path: '/' }); //登录成功之后重定向到首页
}).catch(err => {
 this.$message.error(err); //登录失败提示错误
});

其中异步触发的actions LoginByEmail的处理内容如下:

LoginByEmail ({ commit }, userInfo) {
   const email = userInfo.email.trim()
   return new Promise((resolve, reject) => {
    loginByEmail(email, userInfo.password).then(response => {
     const data = response.data
     setToken(response.data.token)
     commit('SET_TOKEN', data.token)
     resolve()
    }).catch(error => {
     reject(error)
    })
   })
  }

很容易看出想做的是将从服务器端拿到的token(唯一标示用户身份)放到浏览器本地Cookie中去

2、全局钩子router.beforeEach中拦截路由

这一步是核心,具体处理流程示意如下:

基于vue实现网站前台的权限管理(前后端分离实践)

路由拦截处理流程

具体代码如下:

router.beforeEach((to, from, next) => {
 if (getToken()) { // 判断是否取到token
  if (to.path === '/login') {
   next({ path: '/' })
  } else {
   if (store.getters.roles.length === 0) { // 判断当前用户是否已获取完user_info信息
    store.dispatch('GetInfo').then(res => { // 获取user_info
     const roles = res.data.role
     store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
      router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
      next({ ...to }) // 放行路由
     })
    }).catch(() => {
     store.dispatch('FedLogOut').then(() => {
      next({ path: '/login' })
     })
    })
   } else {
    next() // 放行该路由
   }
  }
 } else {
  if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单里的路径,继续让其访问
   next()
  } else { // 其他不在白名单里的路径全部让其重定向到登录页面!
   next('/login')
   alert('not in white list, now go to the login page')
  }
 }
})

流程图中几个重要步骤解释一下:

判断前端是否取到了token令牌:getToken()

操作很简单,主要是从Cookie中获取,看token是不是已经拿到了:

export function getToken () {
 return Cookies.get(TokenKey)
}

vuex异步操作store.dispatch('GetInfo'):获取用户信息

GetInfo ({ commit, state }) {
   return new Promise((resolve, reject) => {
    getInfo(state.token).then(response => {
     const data = response.data
     console.log(data)
     commit('SET_ROLES', data.role)
     commit('SET_NAME', data.name)
     resolve(response)
    }).catch(error => {
     reject(error)
    })
   })
  }

操作也很简单,用一个get的restful api从服务器获取用户的角色和名字

vuex异步操作store.dispatch('GenerateRoutes', { roles }):根据不同的roles来生成不同的前台路由

GenerateRoutes ({ commit }, data) {
   return new Promise(resolve => {
    const { roles } = data
    let accessedRouters
    if (roles.indexOf('admin') >= 0) {
     accessedRouters = asyncRouter
    } else {
     accessedRouters = filterAsyncRouter(asyncRouter, roles)
    }
    commit('SET_ROUTERS', accessedRouters)
    resolve()
   })
  }

从代码中可以看出,我这是只区分了管理员角色admin和其他普通用户(即非Aadmin两种权限)

该系列的实践后续还将尝试更多,将会一一撰帖成文,我也是个初学者,路漫漫而求索之。。。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext.MessageBox工具类简介
Dec 10 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
HTML Table 空白单元格补全的简单实现
Oct 13 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 #Javascript
vuejs实现递归树型菜单组件
Jan 13 #Javascript
在vue中通过axios异步使用echarts的方法
Jan 13 #Javascript
详解基于vue-cli配置移动端自适应
Jan 13 #Javascript
javascript用rem来做响应式开发
Jan 13 #Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
You might like
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
Node.js编码规范
2014/07/14 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
javascript常用的设计模式
2017/02/09 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue实现评论列表功能
2019/10/25 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
Python爬虫模拟登录带验证码网站
2016/01/22 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python 中split 和 strip的实例详解
2017/07/12 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
化工机械应届生求职信
2013/11/04 职场文书
出国留学介绍信
2014/01/13 职场文书
超市端午节活动方案
2014/01/23 职场文书
学校卫生检查制度
2014/02/03 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
《悯农》教学反思
2014/04/28 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python