基于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使用prototype定义对象类型
Feb 07 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
node读写Excel操作实例分析
Nov 06 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网站在线人数统计
2008/04/09 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
Vue.js递归组件构建树形菜单
2017/12/24 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
Python中replace方法实例分析
2014/08/20 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
忠诚奉献演讲稿
2014/09/12 职场文书
大学生团员个人总结
2015/02/14 职场文书
小学记事作文之200字
2019/08/06 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫