Skip to content

项目

1.Vue怎么做权限管理?

  1. 权限管理一般需求是页面权限按钮权限的管理

  2. 具体实现的时候分后端和前端两种方案:

    前端方案会把所有路由信息在前端配置,通过路由守卫要求用户登录,用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组,需要认证的页面在其路由的meta中添加一个roles字段,等获取用户角色之后取两者的交集,若结果不为空则说明可以访问。此过滤过程结束,剩下的路由就是该用户能访问的页面,最后通过router.addRoutes(accessRoutes)方式动态添加路由即可。

    后端方案会把所有页面路由信息存在数据库中,用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端,前端再通过addRoutes动态添加路由信息

    按钮权限的控制通常会实现一个指令,例如v-permission将按钮要求角色通过值传给v-permission指令,在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集,有则保留按钮,无则移除按钮。

  3. 纯前端方案的优点是实现简单,不需要额外权限管理页面,但是维护起来问题比较大,有新的页面和角色需求就要修改前端代码重新打包部署;服务端方案就不存在这个问题,通过专门的角色和权限管理页面,配置页面和按钮权限信息到数据库,应用每次登陆时获取的都是最新的路由信息,可谓一劳永逸!

2.从0到1自己构架一个vue项目

  1. 从0创建一个项目我大致会做以下事情:项目构建、引入必要插件、代码规范、提交规范、常用库和组件

  2. 目前 vue3 项目我会用 vite 或者 create-vue 创建项目

  3. 接下来引入必要插件:路由插件 vue-router、状态管理 vuex/pinia、ui库我比较喜欢 element-plus 和 antd-vue、http工具我会选axios

  4. 其他比较常用的库有 vueuse,nprogress,图标可以使用 vite-svg-loader

  5. 下面是代码规范:结合 prettier 和 eslint 即可

  6. 最后是提交规范,可以使用husky,lint-staged,commitlint

  7. 目录结构: api/compontes/asserts/views/router/store/utils

3. Vue 大数据量优化

  1. 在大型企业级项目中经常需要渲染大量数据,此时很容易出现卡顿的情况。比如大数据量的表格、树。
  2. 处理时要根据情况做不通处理:
    • 可以采取分页的方式获取,避免渲染大量数据
    • vue-virtual-scroller等虚拟滚动方案,只渲染视口范围内的数据
    • 如果不需要更新,可以使用v-once方式只渲染一次
    • 通过v-memo可以缓存结果,结合v-for使用,避免数据变化时不必要的VNode创建
    • 可以采用懒加载方式,在用户需要的时候再加载数据,比如tree组件子树的懒加载
  3. 总之,还是要看具体需求,首先从设计上避免大数据获取和渲染;实在需要这样做可以采用虚表的方式优化渲染;最后优化更新,如果不需要更新可以 v-once处理,需要更新可以 v-memo 进一步优化大数据更新性能。其他可以采用的是交互方式优化,虚拟滚动、懒加载等方案。