pc vue 项目中的菜单权限控制_白泊_前端开发者

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

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

  1. 登录
  2. 登录后,依次获取账号 tokenId、店铺列表、默认店铺ID、菜单列表
  3. 通过菜单列表生成侧边栏,注意router 文件里面定义了全部的页面路由,所以配置新菜单时候需要提供给后端前端定义的页面路径
  4. menuList 数据存起来,可以存在 vuex、sessionStorage,这个数据可以用于router 里面非白名单页面的拦截比对,如果访问当前账号无权限的页面,可将其跳转 404 页面
  5. 在路由卫士里面拦截检查
  • 登录
  • 登录后,依次获取账号 tokenId、店铺列表、默认店铺ID、菜单列表
  • 通过菜单列表生成侧边栏,注意router 文件里面定义了全部的页面路由,所以配置新菜单时候需要提供给后端前端定义的页面路径
  • menuList 数据存起来,可以存在 vuex、sessionStorage,这个数据可以用于router 里面非白名单页面的拦截比对,如果访问当前账号无权限的页面,可将其跳转 404 页面
  • 在路由卫士里面拦截检查
  • 场景二、(电商类单点登录系统)

    单点登录类系统,通常会多个项目公用一套登录系统,项目首页直接就是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)
    

    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 项目中的菜单权限控制_白泊_前端开发者》
    » 本文链接地址:https://www.rokub.com/73690.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!