文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:pc vue 项目中的菜单权限控制

lzzyok小宝贝

lzzyok小宝贝

2024-04-23 23:29

关注

  一个数组中的所有元素具有相同的数据类型(在C、C++、java、pascal中都这样。但也并非所有涉及数组的地方都这样,比如在VisualFoxpro中的数组就并没这样的要求)。当然,当数据类型为Variant时,各个元素能够包含不同种类的数据(对象、字符串、数值等等)。可以声明任何基本数据类型的数组,包括用户自定义类型和对象变量。

  在pc管理系统这种类型的产品,通常会涉及到账号权限的控制,不同的账号权限能浏览的功能模块是不同的,对应侧边栏菜单模块的显示也会不同。

  场景一、(电商类管理系统)

  1.登录

  2.登录后,依次获取账号tokenId、店铺列表、默认店铺ID、菜单列表

  3.通过菜单列表生成侧边栏,注意router文件里面定义了全部的页面路由,所以配置新菜单时候需要提供给后端前端定义的页面路径

  4.menuList数据存起来,可以存在vuex、sessionStorage,这个数据可以用于router里面非白名单页面的拦截比对,如果访问当前账号无权限的页面,可将其跳转404页面

  5.在路由卫士里面拦截检查

  场景二、(电商类单点登录系统)

  单点登录类系统,通常会多个项目公用一套登录系统,项目首页直接就是dashboard或者index页面,菜单权限数据会放在项目初始化时候通过登录系统返回的tokenID(可以存放到cookie)来请求接口获取,然后存到sessionStorage,到这里可能会有个问题,每次刷新页面时候都会重复请求这个接口,是没必要的,可以定义一个登录状态标识符,第一次登录成功后就做一个标识,之后项目页面刷新时候不再进行菜单权限接口请求,退出或者tokenID过期失效时候,进行重置。

  同样在路由卫士这样的地方进行跳转路径检查,白名单放行,无权限地址导到404。

  场景三、(关于vuex的数据刷新丢失)

  vuex实际上是以全局变量的形式存储数据,每次刷新页面,就丢失了,可以通过几种方式来实现刷新数据保留

  一、使用插件vuex-persistedstate,可以实现持久化state,其支持设置localStorage、sessionStorage、cookie三种形式的存储,默认localStorage,如果不想把所有state都持久化,该插件也是支持配置指定的state持久化。

  二、监听页面刷新(beforeunload),将vuex的state转存到sessionStorage,根vue实例created时候将sessionStorage里的数据在转存到vuex里(vuex.store的replaceState方法)。

  exportdefault{

  name:'app',

  created(){

  //在页面加载时读取sessionStorage里的状态信息

  if(sessionStorage.getItem("store")){

  this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem("store"))))

  }

  //在页面刷新时将vuex里的信息保存到sessionStorage里

  window.addEventListener("beforeunload",()=>{

  sessionStorage.setItem("store",JSON.stringify(this.$store.state))

  })

  }

  }

  [参考](httPS://juejin.im/post/5c809599f265da2dbe030ec6)

  场景四、(页面内权限)

  通常页面内的增、删、改、查,操作也是需要有对应的权限控制的,所有页面模块的权限数据统一以对象形式在一个数组列表里面,存到vuex,然后在每个页面的created时候,获取并绑定当前页面的CURD权限,控制相关操作区域的渲染。

  在C语言中,数组属于构造数据类型。一个数组可以分解为多个数组元素,这些数组元素可以是基本数据类型或是构造类型。因此按数组元素的类型不同,数组又可分为数值数组、字符数组、指针数组、结构数组等各种类别。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯