今天还是在看这个项目: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 : 需知
n
e
x
t
T
i
c
k
会
返
回
p
r
o
m
i
s
e
对
象
而
a
w
a
i
t
p
r
o
m
i
s
e
,
结
果
将
会
发
生
改
变
。
所
以
执
行
完
这
个
句
子
后
,
就
代
表
:
d
o
m
完
成
了
更
新
。
(
这
是
nextTick会返回promise对象 而await promise,结果将会发生改变。 所以执行完这个句子后,就代表:dom完成了更新。(这是
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.
r
o
u
t
e
.
q
u
e
r
y
.
t
o
k
e
n
获
取
当
前
的
t
o
k
e
n
,
(
还
好
知
道
这
句
话
是
什
么
意
思
。
反
正
这
个
t
o
k
e
n
是
从
前
端
拿
来
的
)
,
然
后
通
过
t
h
i
s
.
route.query.token获取当前的token, (还好知道这句话是什么意思。反正这个token是从前端拿来的),然后通过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可以当成是一样滴用嘞。