专栏首页CodeSheep的技术分享前后端分离实践:基于vue实现网站前台的权限管理

前后端分离实践:基于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 条评论
登录 后参与评论

相关文章

  • Java编程思想学习录(连载之:一切都是对象)

    CodeSheep
  • Spring Boot日志框架实践

    CodeSheep
  • RPC框架实践之:Google_gRPC

    CodeSheep
  • 【每周一坑】美队盾牌

    大家好,最近更新频率又慢了,【每周一坑】快变成【每两周一坑】了……不过别急,我们正在酝酿一些好玩又实用的内容和活动,很快会陆续奉上。 刚刚加入不久朋友,如果是初...

    Crossin先生
  • VS Code书写vue项目配置 eslint+prettier 统一代码风格

    以前公司的vue项目只是我一个人在写,代码风格统一,但是后来随着团队增加,统一的代码风格就越来越重要。我的主力工具是sublime,ws辅助,vscode基本很...

    游魂
  • 论文阅读理解 - Deep Learning of Binary Hash Codes for Fast Image Retrieval

    AIHGF
  • asp.net core 系列之用户认证(authentication)

    ASP.NET Core 的 identity 是一种需要用户登录的会员系统,用户可以创建一个登录信息存储在 Identity 的的账号,

    Vincent-yuan
  • Linux中tail与cat的区别

    功能:显示指定文件的后若干行。 语法:tail [+ / - num ] [参数] 文件 tail命令中各个选项的含义为: +num 从第num行以后开始显示。...

    week
  • WebDriverAgent学习使用

    程序员不务正业
  • 用R语言实现神经网络预测股票实例

    因此,我们使用神经网络来解决分类问题。通过分类,我们指的是按类别对数据进行分类的分类。例如,水果可分为苹果,香蕉,橙等。

    拓端

扫码关注云+社区

领取腾讯云代金券