基于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 相关文章推荐
javascript 判断中文字符长度的函数代码
Aug 27 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
使用JavaScript破解web
Sep 28 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
详解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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
深入理解vue中的$set
2017/06/01 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
python读取oracle函数返回值
2016/07/18 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
高中考试作弊检讨书
2014/01/14 职场文书
企业出纳岗位职责
2014/03/12 职场文书
法人授权委托书格式
2014/04/08 职场文书
奉献演讲稿范文
2014/05/21 职场文书
跑操口号
2014/06/12 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书