2021/11/19

今天还是在看这个项目：https://juejin.cn/post/6844903478880370701
看到权限这个地方了。
要知道权限，也就是role，是在获取token之后的。
（我看的那个项目动态挂载的路由表是router.json，一般来说应该是从后端拿来的才对，这里router.json是模拟后端数据了。

这个跟那个项目很像，但是我还是有些没有看懂，先攒着吧。
https://blog.csdn.net/xp541130126/article/details/81513651
还有这个也是讲动态路由的，https://blog.csdn.net/juceli/article/details/96483130?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2.nonecase
我按照这个找到了侧边栏根据角色生成路由的在哪里了，这个链接里的permission_routers就是我看的那个项目的：sidebarRouters

路由权限控制，说白了，当我们已经导入框架后，在页面渲染要做的不过一件事情，那就是遍历permission_routers，也就是现在看的那个项目的
sidebarRouters，然后通过v-for渲染罢了

关于路由权限，我好像大概懂了一些。
这个总结源于案例和自己看的另一个项目a。
案例：https://segmentfault.com/a/1190000009506097
可以看到，案例的权限路由是通过前端控制路由来写的，也就是它写在router.js里面，然后这个路由表是asyncRouterMap。
但是项目a不是写在router.js里的，它的权限是从后端拿来的，于是用了router.beforEach
（其实这个方法实现效果就跟写进了router.js差不多滴）,它通过store.dispatch(‘GenerateRoutes’)，根据roles权限生成可访问的
路由表，它的路由表是router.json。也就是项目a那个参数rdata。
那个sidebarRoutes和rewriteRoutes都是通过store/permission.js里的generateRoutes生成，然后放进vuex里的。
这样是不是理解路由权限是怎么样的了。其实也不难嘛。
案例是通过meta显示组件权限的。我看项目好像用的是directive指令。就是permission里的hasPermi还有hasRole.
其实看懂原案例，知道它每个关键点对应原项目哪个地方，那么原项目就不难理解了。

---

下午：

vue 有一个.sync的修饰符，可以实现vue父子组件的双向绑定，解决prop单向绑定的问题。
链接：https://www.cnblogs.com/00feixi/p/11526057.html
也就是说这样设置以后，当子组件更新值的时候，父组件也会更新。

vue 关于nexttick，好像看懂了，就是修改vue的值的时候,dom不会立马更新，如果你想得到修改后的值，就要用nexttick.
nexttick其实无处不在，它可以保证视图只更新最后一次的vue值。
链接：https://vue3js.cn/interview/vue/nexttick.html#%E4%B8%80%E3%80%81nexttick%E6%98%AF%E4%BB%80%E4%B9%88
也就是说nexttick就是：视图需要等队列中所有数据变化完成之后，再统一进行更新。
在这里有一个 await this.$nextTick : 需知 $nextTick会返回promise对象而awaitpromise，结果将会发生改变。所以执行完这个句子后，就代表：dom完成了更新。（这是$nextTick的结果)
那么，你再this.$el.textContent的话，得到的就是更新后的值啦。
又进一步了解了await promise啦，其实是逻辑get到就知道了。
源码那里就不看了。

请求拦截器和响应拦截器是在axios请求上进行的啊，当然项目用的是自定义axios.axios.create，也就是service

扩展运算符：…数组
通过"…",就可以把数组变成以逗号分隔的参数序列。
比如 arr.push(…items) items=[1,2,3] 就变成了 arr.push(1,2,3)
arr.push(…items)==arr.push(1,2,3)
不得不说扩展运算符有很多用途，先了解就好，以后在用的时候有印象就行：
https://www.bookstack.cn/read/es6-3rd/spilt.1.docs-array.md （合并数组，求最大值。。）
浅拷贝的意思就是说是对原数组的引用。比如扩展运算符合并还有concat合并数组，都是对原数组的引用。(示例代码在链接里）

关于handler函数：https://blog.csdn.net/weixin_36128925/article/details/113629234
handler就是对某个变量进行监听处理，当变量发生变化的时候就会执行handler.

关于context:经常看到context，总觉得哪里不理解，于是就去问了一下大佬，这是复制粘贴的：
只是因为某些人为需求才添加点信息上去 用于前后端信息验证
就像项目的那个‘SET_TOKEN’是为了安全 防止有人不登陆就直接使用其他接口
然后我梳理了一下，大概意思就是说，context是当发送请求时就会产生的信息，也就是我们在后台看到的headers请求头。
然后每次登录之后拿到后端的token之后，就会通过commit(‘set_token’,token)，把set_token的值存进context里。
后端通过路由拦截就可以判断当前的token是否正确，从而进入下一步。

快捷键：ctrl+p 可以搜索文件名

store里的actions是通过this.$store.dispatch来调用滴。

这里梳理一下token吧（我累了），（之前在登录的时候就有token了），从src/views/login.vue开始，通过this.$route.query.token获取当前的token,（还好知道这句话是什么意思。反正这个token是从前端拿来的），然后通过this.$store.dispatch()就可以获取触发action的login，
action里的login(token).then,将token发送给了login接口，login接口通过token向后端请求数据获得data，大概就是这样。
然后commit(‘set_token’,token)就是通过mutation,将token存在了store里，可以说是临时存储一下吧。为什么用commit(…token)呢，
因为context.commit可以触发mutation.
这里其实是分成两步了。这两步没有什么必然。换顺序都可以嘞。

看到一个链接说，路由的component和redirect可以当成是一样滴用嘞。