Skip to content

001 前端开发周报

距离项目创建已经过去20多天了. 记录一下这些天在做的事情。

本周内容

  • 后端支撑选用 directus.
  • 完成了登录鉴权的逻辑.
  • 完成了菜单渲染及权限检测指令.

学习

多个新技能一起学对于我这个级别的人来说, 还是有些吃力. 特别是啃英文文档.

后端支撑

这次没有选择 mock.js , 虽然曾经用 [email protected] 简单实现了一个mock服务. 但始终无法模拟更真实的后端. 所以这次选了 directus .

选定之前, 还同时看了另外几家headlessCMS: strapi nocodb hasura . 都是一些牛逼的产品, 各有千秋.

同样, 啃英文文档

状态管理

尝试了 pinia 和 [email protected] 自带的 useState , 最终还是选择了 pinia .

毕竟 pinia 号称是 [email protected] . 凭着 vuex 的经验, 使用起来并没有什么负担.

页面标记

为了保证前端方便的控制权限并且足够灵活. 我们约定要在每个页面中配置一个 page 标记.

如果你正在使用 setup 模式. 需要另外写一个 <script /> , 如下:

如果你还是沿用 [email protected] 的写法, 只需要在 export default 中新增一个 page: {} 属性即可.

<script>
export default {
	page: {
		name: '页面名称'
	}
}
</script>

plugins/pages 插件会处理所有标记了 page 的页面.

注意: 没有标记 page 的页面不在权限管理的范围内. 也不会出现在主菜单中. 但是, 未登录的情况下也是无法访问的. 原因是目前还没有一个免登录名单的配置.

目前只实现了两个配置项:

  • name: string 页面名称
  • sort: number 在菜单栏中的排序

功能权限

在角色中增加字段 routes , 用于存储当前角色下有权访问的前端路由集合. 比如: ["admin", "admin/create/index"].

注意: 这里存的是文件名 fileName

用户登录取得访问权限后, 前端对比所有 $pages 页面信息, 得到一组可访问的数据权限 auth.authorizedPages .

登录鉴权

逻辑上跟 [email protected] 是一样. 这里记录一下流程:

首先由接口 api.auth.login() 拿 token , 并保存于 cookie 中.

成功拿到 token 后, 再由接口 api.users.me() 拿用户基本信息, 包括所属角色的 routes .

下次在访问平台的时候, 先检测 cookie 中的 token 是否存在, 如果有则会直接去接口 api.users.me() 中拿用户信息. 如果没拿到 token 或者拿不到用户信息. 则会跳转至登录页面.

所以, 要想把项目跑起来, 至少要有两个后端接口做支撑:

  • 登录接口: 换 token .
  • 获取当前用户接口: token 换 routes .

另外, refresh_token 的问题暂时先不考虑. 不是主线任务.

渲染菜单

循环 auth.authorizedPages 构建当前用户有权限的菜单.

需要注意的是: 动态路由不会被渲染, 如: detail-[id].vue

权限指令

除了菜单外, 页面内经常碰到的一些功能项也需要判断权限. 所以就有了 plugins/check 插件.

使用 v-check="'admin-create'" 指令去控制当前dom是否该显示.

注意: 这里的值应该填写路由名称 routeName , 而不是 fileName .