在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方法)。

export default {
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 权限,控制相关操作区域的渲染。

pc vue 项目中的菜单权限控制的更多相关文章

  1. 解决vue项目中遇到父组件的按钮或操作控制重新挂载子组件但是子组件却无效果的情况

    在vue项目中终会遇到需要父组件的按钮或操作控制重新挂载子组件的需求,我在新项目中就遇到这种需求.真实场景是父组件的早,中,晚三个按钮(代表三个时间段)来控制子组件的table表格列的动态加载. 子组 ...

  2. Vue项目中遇到的一些问题总结

    一.开发环境使用Ajax请求,报错  网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...

  3. 在前后端分离的SpringBoot项目中集成Shiro权限框架

    参考[1].在前后端分离的SpringBoot项目中集成Shiro权限框架 参考[2]. Springboot + Vue + shiro 实现前后端分离.权限控制   以及跨域的问题也有涉及

  4. Vue项目中添加锁屏功能

    0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...

  5. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  6. C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用心得

    在网上查了很多,发现没有讲述关于--C#winform菜单权限分配,与菜单同步的treeView树状菜单权限控制使用--的资料 自己研究了一个使用方法.下面来看看. 我有两个窗体:LOGINFRM,M ...

  7. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  8. vue项目中使用百度统计

    统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...

  9. dom元素的tabindex属性介绍及在vue项目中的应用

    dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabin ...

随机推荐

  1. Java中Jedis连接Linux上的Redis出现connect time out(解决方案)

    我的代码: /** * * <p>Title: testJedis</p> * <p>Description: 测试单机版的redis连接(每连接一次构建一个对象) ...

  2. Android之MVP设计模式

    一.概述 MVP设计模式的前身是MVC,这个无需再议 在安卓工程中MVC对应关系如下: Layout->View : 对应布局文件Activity->Controller,View (其中 ...

  3. mysql命令行乱码解决办法

     解决办法: 修改mysql的配置文件my.ini,打开my.ini找到default-charactor-set,改为utf8. 进入命令行: show variables like'%char%' ...

  4. DirectX12 3D 游戏开发与实战第二章内容

    矩阵代数 学习目标 理解矩阵及其相关运算的定义 探究为何能把向量和矩阵的乘法视为一种线性组合 学习单位矩阵.转置矩阵.行列式以及矩阵的逆等概念 逐步熟悉DirectXMath库中提供的关于矩阵计算的类 ...

  5. 如何更规范化使用MySQL

    如何更规范化使用MySQL 背景:一个平台或系统随着时间的推移和用户量的增多,数据库操作往往会变慢:而在Java应用开发中数据库更是尤为重要,绝大多数情况下数据库的性能决定了程序的性能,如若前期埋下的 ...

  6. Git同步更新操作GitHub和码云仓库上面的代码

    一.前言 问题: 小编在生活中,一般都是将代码保存到github上,但由于国内的码云仓库确实速度比github快很多,用起来也很方便,于是后来就慢慢转码云了,当然小编在github上的代码也不想放弃更 ...

  7. java工具方法

    仅记录所遇到并使用的工具方法. 1.md5加密 /** * 对传入的字符串数据进行MD5加密 * @param source 字符串数据 * @param code 字符编码 * @return 加密 ...

  8. DefaultSerializer requires a Serializable payload but received an object of type [model.Admin]

    一.问题描述:   在用redis做二级缓存时,出现如下异常   DefaultSerializer requires a Serializable payload but received an o ...

  9. oracle异机恢复测试

    (一)问题背景 最近在生产环境中,开发人员误操作,使用truncate将oracle数据库某个表的数据全部删除了,在删除之后,开发人员发现自己闯祸了,于是联系值班的DBA进行紧急数据恢复. 经过分析, ...

  10. Google Test入门教程:从下载到运行

    本文以VS2019为例,自己的工程使用Debug x64,多线程调试DLL(/MDd),用户可以根据自己需求更改配置,只要所有配置前后统一即可. 第一步:clone Google Test源码 打开h ...