项目

一、权限分配

1. ❗登录权限

• 首先考虑，用户只有登录成功才有权访问登录之后的页面，在未登录情况下访问其他路由是不被允许的。只需要判断是否有 token 有，如果有那么就可以访问之后的页面。

2. ❗token 过期权限

• 主动处理
  • 登录成功之后存储当前的token时间戳，和每次请求的时间戳做以及后端约定的过期时间对比，来判断是否过期，如果有refresh_token，通过refresh_token换取 token ，如果refresh_token也过期，那么就自动退出登录。
• 被动处理
  • 主要是后端处理，我们监听每次响应拦截器的状态码，如果为 401 那么就证明登录过期，退出到登录页面。

3. 传统权限分配

• 传统的权限分配是对每个人员进行单独的权限设置，如果员工数量众多的话，一一分配权限不利于企业高效管理，效率并不高。

4. RBAC

• 基于角色的权限分配解决方案，实现了用户和权限点的分离，相对某个用户设置权限，只需要给该用户设置对应角色就可以，该角色就拥有了对应的全选，

二、❗动态路由权限

1. 路由处理：

路由分为动态路由和静态路由。

• 静态路由
  • 是所有类型的用户都可以访问的公共页面
• 动态路由
  • 我们通常会在用户登录进入到主页面之前进行分配。
  • 在路由守卫中获取后端返回的用户数据拿到用户权限。
  • 基于权限筛选动态路由，可以通过路由中 meta 的属性和后端返回的用户权限进行匹配。
  • 利用 addRoutes 进行动态添加筛选出来的当前用户的路由。
  • next（to.path）让代码重新触发路由守卫
  • 但是自己用到的模板是通过 $router.options.routes 来渲染路由菜单的，他无法拿到动态添加的路由，此时需要通过vuex自己维护一个路由表，把原有的静态路由和筛选出来的当前用户的路由都添加进去。
  • 当我们退出登录的时候需要重置路由，因为我们的动态路由是由 addRoutes 方法累加的，如果不清除路由，那么下一个用户会获得上一个用户的权限。

2. 按钮权限

• 通过封装自定义指令，自定义指令查询后端返回的权限中是否有当前权限，如果没有，则把该权限所在按钮移除。

三、Excel 导入导出

• 基于 vue-element-admin 进行实现,xlsx通过 excel 导入的数据字段key是中文,接口需要的是英文,为了后期容易维护,通过映射表进行数据的处理,时间 excel 的时间基于1900,js基于1970年份不准的,excel的时间戳类似于天数,将excel的时间处理为 js 的时间。

四、购物车模块

区分登录和未登录

• 未登录: 数据存放到vuex+本地
• 登录: 购物车数据存到接口,获取购物车的数据将本地数据和接口数据进行合并,才是完整的购物车数据

五、 axios 取消重复请求

1. axios.CancelToken和 CancelToken.source()

2. //配置 cancelToken
   cancelToken: new CancelToken(c => {
         user.cancel = c
       })
   

3. source.token 生成标识

4. source.cancel() 取消请求

六、thunk 函数

将多参数函数，替换为单参数的版本，且只接收回调函数作为参数。

==优点==：参数复用

七、微信小程序支付

1. 登录

• 获取用户信息： button组建中添加 open-type 属性 获取用户信息，主要是获取加密签名和解密算法。
• 获取用户凭证： 调用小程序的 login方法得到 code
• 发起请求登录的接口，把code和加密签名传递给后端，最后后端返回 token

code: res.code,
// 加密字符串和加密签名
encryptedData: info.encryptedData,
iv: info.iv,
rawData: info.rawData,
signature: info.signature

1. 支付

• 创建订单：根据购物车的收货地址、商品信息、商品金额创建订单，服务端返回订单id（order_id）
• 预支付：根据订单id获取支付需要的参数
• 支付：调用 requestPayment 方法唤起微信支付功能（传递对应时间戳、noncestr随机字符串、加密签名）参数
• 对支付状态进行查询