基于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 相关文章推荐
js数组的操作详解
Mar 27 Javascript
JS中的log对象获取以及debug的写法介绍
Mar 03 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
node.js 发布订阅模式的实例
Sep 10 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 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
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
使用php实现截取指定长度
2013/08/06 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
JS常见面试试题总结【去重、遍历、闭包、继承等】
2019/08/27 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中__new__与__init__方法的区别详解
2015/05/04 Python
python检索特定内容的文本文件实例
2018/06/05 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
使用python求解二次规划的问题
2020/02/29 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
Python类class参数self原理解析
2020/11/19 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
统计工作个人总结
2015/03/03 职场文书
担保贷款承诺书
2015/04/30 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python