vue中如何实现后台管理系统的权限控制的方法示例-创新互联-成都快上网建站

vue中如何实现后台管理系统的权限控制的方法示例-创新互联

一、前言

为海宁等地区用户提供了全套网页设计制作服务,及海宁网站建设行业解决方案。主营业务为成都网站设计、成都做网站、海宁网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

在广告机项目中,角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细:

  1. 接口访问的权限控制
  2. 页面的权限控制
    1. 菜单中的页面是否能被访问
    2. 页面中的按钮(增、删、改)的权限控制是否显示

权限控制是什么

在权限的世界里服务端提供的一切都是资源,资源可以由请求方法+请求地址来描述,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源。具体的说,前端对资源的访问通常是由界面上的按钮发起,比如删除某条数据;或由用户进入某一个页面发起,比如获取某个列表数据。这两种形式覆盖了资源请求的大部分场景,因此权限控制也可以被笼统的分成菜单权限控制和按钮权限控制。


下面我们就看一看是如何实现这些个权限控制的。

二、接口访问的权限控制

接口权限就是对用户的校验。正常来说,在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token,

然后服务端获取到这个Token后进行比对,如果通过则可以访问。

现有的做法是在登录成功的回调中将后台返回的Token直接存储到sessionStorag​e,然在请求时将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中如何实现后台管理系统的权限控制的方法示例-创新互联
分享URL:http://kswjz.com/article/cojoco.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流