从自己的项目出发去实现前端权限管理

本文主要是介绍从自己的项目出发去实现前端权限管理，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

我在自己的后台管理项目中 根据登录的用户不同，从而对不同的用户给予不同的权限。这里 是通过路由，以及token验证，并且通过vuex进行全局的控制

下面就从我自己的简单项目出发 我今天拜读了几大佬位的文章之后 发现自己的权限管理实在过于简单了。后面也会对大佬的文章思路进行梳理。

1.登录

不管怎么样的权限管理 第一步都是登录 

这样简单的一个登录页面 两个input框 加上一个登录按钮就搞定了

我这里使用的是mock模拟的数据

这里分别代表的两种用户

在登录的界面中有一个·点击的按钮 按钮点击之后就会对发起请求

api配置

按钮

这里会和后台的数据进行验证 后台与之对应成功后会返回一个token 

这里利用mock里面的随机数来随机制作的Token

然后在点击按钮之后会调用vuex 把token传递个vuex

vuex会把token存储起来 与此同时也会把token存储到cookie之中

这个时候只有这一步那么我们的登录就基本上完成了

完成登录才可以跳转到管理界面 这个时候就需要路由拦截

因为是存在本地的tooken中 所以你再次刷新的时候就不会要再从新登录了 同样把这个存在sessionStorage是一样的 不管cookie更加安全

同样的 由于 vue 是单页面应用，操作都是在一个页面跳转路由，因此 sessionStorage 较为合适 我在另一个项目中就大量的使用到了sessionStorage

好的 下一步就是权限管理了 我这个项目的权限管理可以用简单粗暴来形容 为什么那么说 往下看

我在调用完token进入登录界面之后 再次调用了vuex的下一个方法 把menu传入 到了setMenu中 而menu 这个由发起post请求返回的实际上是

仔细一看 是不是很熟悉的 这里实际上就是路由的配置文件

我这边直接把路由的配置文件加入进来了 

这里使用vuex把他相关的数据存储起来

然后下一步就是调用路由动态配置 应该吧哪些组件配置给对应的路由

获取到数据之后动态生成路由相关数据

并且把路由相关的数据添加到路由文件中 但是因为这是发送在内存中的 所有本地察觉不到

OK下一步就是渲染了

这里通过计算属性把vuex的有关数据简写获取 

然后根据获取到的数据进行组件的渲染

同时根据获取到的数据通过命名路由跳转

实现路由跳转 这样我个人的项目的前端鉴权就完成了可以说十分的简单 而且这种方式可以说并不好  后面我们仔细学习一下大佬的鉴权和跳转方式

这篇关于从自己的项目出发去实现前端权限管理的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！