vue项目中的菜单权限控制小白基础_菜单入门教程

在pc 管理系统这种类型的产品,通常会涉及到账号权限的控制,不同的账号权限能浏览的功能模块是不同的,对应侧边栏菜单模块的显示也会不同。场景一、(电商类管理系统)登录登录后,依次获取账号 tokenId、店铺列表、默认店铺ID、菜单列表通过菜单列表生成侧边栏,注意router 文件里面定义了全部的页面路由,所以配置新菜单时候需要提供给后端前端定义的页面路径me

vue项目中的菜单权限控制小白基础

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

vue项目中的菜单权限控制小白基础_菜单入门教程

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

  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))
    })
  }
}

场景四、(页面内权限)

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

海计划公众号
(0)
上一篇 2020/03/29 01:40
下一篇 2020/03/29 01:40

您可能感兴趣的内容

  • 一位程序员妹纸讲述她是如何拿到美团offer的?入门教程_面试入门基础知识

    美团,我是在拉勾网上投的简历,之前也投过一次,简历都没通过删选,后来让学姐帮我改了一下简历,重新投另一个部门,获得了面试机会。10月23日,中午HR打电话过来预约了下午4点半面试,说会在线写代码,让我准备好网络环境。结果5点半还没打电话过来,被放鸽子。与hr重新沟通过后,确定下周一下午再面,可是跟hr沟通预约这一套貌似在美团并没有什么用。一面(20分钟)晚7

    2020/03/30
  • Nest.js使用攻略_用于构建高效且可伸缩Web应用程序的渐进式 Node.js 框架

    Nest.js使用攻略 官方网址:https://nestjs.com/ GitHub:https://github.com/nestjs/nest 简介描述:用于构建高效且可伸缩…

    2020/03/06
  • edex-ui使用教程_一个类似于科幻电脑界面的全屏桌面应用程序

    edex-ui使用教程 GitHub:https://github.com/GitSquared/edex-ui 简介描述:一个类似于科幻电脑界面的全屏桌面应用程序 edex-ui…

    2020/03/06
  • 加载速度提升 15%,携程对 RN 新一代 JS 引擎 Hermes 的调研新手入门_Hermes使用教程

    作者简介储贻锋,携程无线平台研发部基础框架组资深Android研发,目前主要负责CRN Android端和携程Android基础架构的维护与开发工作。引言Facebook在ChainReact2019大会上正式推出了新一代JavaScript执行引擎Hermes。Hermes是个轻量级的JS引擎,专门对Android上运行ReactNative进行了优化。我

    2020/03/26
  • 开发者必知的MySQL 8.0 新功能菜鸟教程_sql基础知识教程

    下面将以 MySQL 社区的优先级从高到低来展示这些功能:TOP 10MySQL 文档存储默认 utf8mb4 编码JSON 增强CTEs(译者注:Common Table Expresssions 公共表格表达式)窗口函数降序索引更好的优化器消费模型MySQL 服务器组件GIS(译者注:Geographic Information System 地理信息系

    2020/03/24
  • 解析Vue.js中的computed工作原理小白知识_vue菜鸟教程网

    我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。JS属性:JavaScript有一个特性是 Object.defineProperty ,它能做很多事,但我在这篇文章只专注于这个方法中的一个:var person = {};
    Obj

    2020/04/03
  • Package.json详解菜鸟教程下载_package使用攻略

    引言前端需要学习的东西真的挺多的,之前主要从事的是MVC框架,操作DOM,使用JQUERY比较多,不知到什么时候,发现现在前端MVVM是主流,不得不把之前的大部分东西丢掉,作为前端婴儿不断前行。所以以后的文章,可能开始都比较基础,希望大拿不要见笑,若有不对的地方,希望指正,我也会不断修正迭代。在学习MVVM(react和vue)的时候,开始就是会找iview

    2020/03/23
  • React组件设计模式-Render-props基础知识_模式使用帮助

    写业务时,我们经常需要抽象一些使用频率较高的逻辑,但是除了高阶组件可以抽象逻辑,RenderProps也是一种比较好的方法。RenderProps,顾名思义就是将组件的props渲染出来。实际上是让组件的props接收函数,由函数来渲染内容。将通用的逻辑抽象在该组件的内部,然后依据业务逻辑来调用函数(props内渲染内容的函数),从而达到重用逻辑的目的。简单

    2020/03/24
  • Js实现Symbol指南攻略_Symbol基础知识

    Symbol是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID。Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的symbol注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:”new Symbol()”。Js实现Symbol//

    2020/03/23
  • 正则表达式后行断言 • 探索 ES2018 和 ES2019菜鸟教程_正则攻略教程

    RegExp 后行断言本章将解释由Gorkem Yakin,Nozomu Katō,Daniel Ehrenberg等人给出的RegExp 后行断言(Lookbehind Assertion)提案。一个 先后行断言(Lookaround Assertion)是正则表达式中的一个构造,明确了当前位置的前后字符序列,但没有其他副作用。亦称为零宽断言(Zero-w

    2020/04/05
  • Roarr菜鸟指南_一个Node.js和浏览器的JSON logger

    Roarr菜鸟指南 GitHub:https://github.com/gajus/roarr 简介描述:一个Node.js和浏览器的JSON logger debug使用简单,可…

    2020/03/11
  • Vue 中的作用域插槽菜鸟攻略_vue小白基础

    作用域插槽

    Vue.component(‘child’, {data(){return {list:[1,2,3,4]}},template: `

    • {{item}}

    `,
    })
    let vm

    2020/03/31
  • Node.js 指南(迁移到安全的Buffer构造函数)指南攻略_指南入门百科

    概述本指南介绍了如何迁移到安全的Buffer构造函数方法,迁移修复了以下弃用警告:由于安全性和可用性问题,不建议使用 Buffer()和 new Buffer()构造函数,请改用 new Buffer.alloc()、Buffer.allocUnsafe()或 Buffer.from()构造方法。变式1:放弃对Node.js ≤4.4.x和5.0.0 – 5

    2020/03/24
  • javascript构造函数使用教程_函数入门基础

    1:基本概念提起构造函数,我们需要从JS的创建对象开始,JS的创建对象有两种方式,一种是对象字面量法(把一个对象的属性和方法一一罗列出来),对象字面量法有一个明显的不足在于它不适合批量的或者是构建大量的类似或者重复的对象,由于这个限制也就有了另一种创建方式,构造函数。对象字面量 const person = {name: ‘Eric’,age: 28,

    2020/03/29
  • 在React应用程序中用RegEx测试密码强度菜鸟攻略_密码小白攻略

    尽管一些组织认为应该由用户选择健壮的用户名和密码来保护自己,但是开发人员可以通过将规则包含在程序的设计中来帮助进行良好的密码选择。例如,开发人员可以通过加入进度条、百分比或颜色,来帮助用户在输入密码时规定密码的质量。许多人都知道弱密码很短,并且包含字母或数字,但绝不会同时包含两者。我们也知道强密码包括符号以及区分大小写的字符。那么我们如何在应用程序中检查这些

    2020/03/20
  • 纯 JS 设置文本框的默认提示使用说明_input菜鸟教程下载

    HTML5 中有个新特性叫 placeholder,一般用它来描述输入字段的预期值,适用于 text、search、password 等类型的 input 以及 textarea。示例如下:
    <input type="search" placeholder="请输入查询关键

    2020/03/29