基于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验证表单第二部分
Nov 25 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
vue中注册自定义的全局js方法
Nov 15 Javascript
js实现飞机大战游戏
Aug 26 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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&&mysql)三
2006/10/09 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
限制复选框的最大可选数
2006/07/01 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python从子线程中获得返回值的方法
2019/01/30 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
护理中职生求职信范文
2014/02/24 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
毕业生学校组织意见
2015/06/04 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
CSS 圆形进度栏
2021/04/06 HTML / CSS
使用Django实现商城验证码模块的方法
2021/06/01 Python
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python