Axios封装

实例化 create

  • 可以配置baseURL timeout
  • 实例化支持创建多个

请求拦截器

  • 拦截的是请求
  • 在正式发送之前容许我们做一下自己的事件 针对请求
  • config -> token request header

响应拦截器

  • 拦截的时候返回对象 在后端返回树的到业务组件中使用之前 先拦截异步 容许我们做一些基于返回对象的操作
  • token失效 401 -> 跳转登录
  • 自定义错误返回 -> 以自定义的code作为判断当前是否成功
  • 如果是ture 返回response 不是则 return Promise.reject(error)

vuex

集中状态管理工具（多组件共享的状态） 一般的模式，vuex中封装所有和数据相关的操作，包括同步和异步+业务组件负责触发action函数以及消费state中的数据

为什么必须要有一个mutation ？ 为了调试的时候能方便记录下来 mutation和state俩者之间的对应关系，也就是说我在什么时间通过提交了哪个mutatioon函数把state修改成了什么样子 （一一对应）

vuex持久化管理

场景：token vuex 刷新页面 vuex token丢失了 所以我们配合cookie实现了持久化，刷新不丢失 为什么要采取vuex+cookies？ vuex是基于内存的 特点速度快 vue配合方便 cookie 基于硬盘 速度慢 + 刷新不丢失，持久化

步骤 1.获取token 一式两份 vuex+cookie 2.初始化vuex token的位置 先从cookie取 取到了就用cookie的值 取不到才初始化为空，只要不刷新使用的就是基于内存的state中的token，一旦刷新，就会从磁盘本地取到持久化的token，存入内存里

cookie和localstorage 区别 cookie是可以设置过期时间的，前后端都可以设置（一般不让前端设置） cookie被设置每次请求都是会发送给服务器的

跨域解决

跨域产生的原因

  • 协议 端口 域名 三者之间有任何一个不一样就会跨域
  • 经过浏览器发送 由于浏览器的安全策略 请求可以发送 但是回来的时候被拦截了

解决方法

  • 代理方案 前端主导 旨在开发环境下生效
    • 前端服务和后端服务之间有一个中间服务器和前端服务器
    • 针对前端服务它俩三者保持一致 不跨域，针对于后端接口，由于是服务器对服务器不经过浏览器 也不会跨域
  • cors 后端主导 开发和生产都可以配置
    • 后端拿到当前前端服务器的地址，然后把它配置到一个类似白名单机制一样的请求头，允许当前的域名访问这个接口，浏览器收到cors后就不会拦截了

跨域的时候请求到发没发起来？是压根没法出去，还是发出去了返回的时候被拦截了

  • 发送出去了，返回的数据被浏览器拦截了

路由跳转

next()方法 必须在任何一个分支下都执行

token失效控制

token标识当前用户是否登录 接口的权限标识有小的token，才能访问到接口数据，如果token的是无效的接口数据不让访问的，接口数据是不让访问的 静默状态下时间到达会失效，如果是正常操作token会自动续时，不会突然失效跳转 处理token失效 拦截器 监控当前接口是否401 如果时强行跳转到登录页

增删改查

增：

  • 步骤：
    • 表单收集提交数据
    • 表单校验
    • 提交接口
    • 更新列表，关闭弹框/页面
    • 清空数据
  • 重点：
    • 在提交前表单收集的过程容易出错
    • 双向绑定、组件产出的格式与前端要求的不一样需要自行转换

查、改：

  • 点击按钮调用的接口不一致
  • 需要判断条件区分this.form.id
    • 有id编辑（需要数据回显）
    • 无id新增

导入导出

v-model语法糖

什么地方用到了这个v-model 组件身上写了v-model做了什么事情

  • 绑定名称为value的属性prop
  • 绑定名称为input的事件
  • 组件内部$emit触发 input事件的时候 自动把事件参数赋值给v-model的数据

上传组件的v-model封装

  • 父到子 回显 prop + watch 把userinfo.staffPhto 传给 子
  • 子到父 上传成功时 this.$emit(‘input’,imgUrl)

RBAC权限设计

RBAC：基于角色的权限控制，做权限点的收敛 方便角色复用 流程：

  • 给员工分配角色，给角色分配权限
  • 菜单路由权限控制
    • 使用权限数据menus和本地动态路由表做匹配，得到过滤之后的有资格进入到路由系统中的动态路由表
    • 通过调用router.addRoues方法把动态路由表加入到路由系统中
  • 菜单的视图显示
    • 使用vuex管理menus
    • 得到过滤之后的动态路由表 存入vuex
    • 组件中使用数据渲染菜单 把之前的options.routes 静态的属性变成vuex中动态的state下的menusList
  • 按钮权限控制（控制按钮的显示和隐藏）
    • 封装一个指令 让全局都可以使用这个指令
    • 指令的逻辑 通过points数组 和 当前的按钮标识做对比 如果能在points中找到，就显示 找不到 隐藏
    • el.parentNode.remove(el) 移除自己的方法

树形结构数据处理

原理：通过pid去匹配id 本质上是一个寻找父节点的过程 流程：

  • 遍历原数组 以数组的id作为key,数组成员本身作为value形成了一个对象结构
  • 遍历了一下这个数组 数组中的项的pid去map对象中去匹配，如果匹配的到就直接push到他的chilren属性中 如果匹配不上，自身就是最外层的父节点 直接push到最终产出的数组中

为什么不用递归呢？

  • 递归的方式时间复杂度会更高，而且如果处理的数据很多，有可能出现栈溢出的情况