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

Vue系列实践文章

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、点击“登录”按钮触发登录事件

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

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

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

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

具体代码如下:


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

  • 判断前端是否取到了token令牌:getToken() 操作很简单,主要是从Cookie中获取,看token是不是已经拿到了:
  • vuex异步操作store.dispatch(‘GetInfo’):获取用户信息

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

Linux下快速迁移海量文件的操作记录

有这么一种迁移海量文件的运维场景:由于现有网站服务器配置不够,需要做网站迁移(就是迁移到另一台高配置服务器上跑着),站点目录下有海量的小文件,大概100G左右,...

3187
来自专栏余生开发

cypress e2e 测试神器 安装使用及语法

cypress 我们直接去Cypress的官网,根据教程我们先进入我们项目的根目录,执行npm install cypress --save-dev,在安装完成...

2673
来自专栏埋名

专门为Github党打造的超级无敌Chrome插件

作为GitHub党,分享一些好用的Chrome插件,帮助增强Github功能。标题名称在Chrome插件商场搜索,即可安装对应的插件。

4633
来自专栏云计算教程系列

在Ubuntu 16.04上安装OpenVAS 8

OpenVAS(开放式漏洞评估系统)是一个客户端/服务器架构,它常用来评估目标主机上的漏洞。OpenVAS是Nessus项目的一个分支,它提供的产品是完全地免费...

2372
来自专栏腾讯移动品质中心TMQ的专栏

Appium:轻松玩转app+webview混合应用自动化测试

Appium这个听起来既生疏也熟悉的自动化测试工具,比起原生的UiAutomator可能是异常的不起眼,可是却是有自身独当一面的能力,可以完成许多高难度作业,完...

3.4K1
来自专栏進无尽的文章

Fastlane| 一句代码完成自动打包发布到蒲公英

第一个选项的意思是:自动截屏。这个功能能帮我们自动截取APP中的截图,并添加手机边框(如果需要的话) 第二个选项的意思是:自动发布beta版本用于TestFli...

1853
来自专栏跟着阿笨一起玩NET

TF卡格式化8G格式化时候变成128KB的解决办法

我的8GC6卡,APPS2SD后,因为不满意分区容量,所以就想删除分区重新分配容量. 删除分区方法:我的电脑---管理---磁盘管理--里删除了EXT3分区,...

4672
来自专栏Fred Liang

Service Worker 实现 web 应用消息推送

Service Worker 是事件驱动的 worker,生命周期与页面无关,关联页面未关闭时,它也可以退出,没有关联页面时,它也可以启动.

6902
来自专栏黑白安全

初级渗透教学

通常,判断一个网站是否存在注入点,可以用’,and 1=1 ,and 1=2,+and+1=1,+and+1=2,%20and%201=1,%20and%201...

6033
来自专栏做全栈攻城狮

C#实现动态网站伪静态,使seo更友好

本教程将使用Visual Studio 2013手把手教你实现webform动态页面的伪静态。本教程配套的C#源码工程可通过我的github下载。地址:http...

1394

扫码关注云+社区

领取腾讯云代金券