vue中如何实现后台管理系统的权限控制的方法示例-创新互联
一、前言
为海宁等地区用户提供了全套网页设计制作服务,及海宁网站建设行业解决方案。主营业务为成都网站设计、成都做网站、海宁网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!在广告机项目中,角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细:
- 接口访问的权限控制
- 页面的权限控制
- 菜单中的页面是否能被访问
- 页面中的按钮(增、删、改)的权限控制是否显示
权限控制是什么
在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源。具体的说,前端对资源的访问通常是由界面上的按钮发起,比如删除某条数据;或由用户进入某一个页面发起,比如获取某个列表数据。这两种形式覆盖了资源请求的大部分场景,因此权限控制也可以被笼统的分成菜单权限控制和按钮权限控制。
下面我们就看一看是如何实现这些个权限控制的。
二、接口访问的权限控制
接口权限就是对用户的校验。正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token,
然后服务端获取到这个Token后进行比对,如果通过则可以访问。
现有的做法是在登录成功的回调中将后台返回的Token直接存储到sessionStorage
,然在请求时将Token取出放入headers中传给后台,代码如下:
this.$http({ method: 'get', url: 'test/query?id=20', withCredentials: true, headers: { token: sessionStorage.getItem('token'), name: sessionStorage.getItem('name') //应后台需求传的用户名 } }).then(response => { //请求成功后的操作 })
本文题目:vue中如何实现后台管理系统的权限控制的方法示例-创新互联
当前网址:http://lswzjz.com/article/cojoco.html