咱就是说今天圣诞节还是得加班啊。
1.new Set 转换为数组有两种方法,一种是靠扩展运算符,另一种是靠Array.from方法。
2.set很多方法都是转换成数组再利用数组的方法,通过new Set又转换为set罢了。
3.感觉除了set实现并集,其实像交集差集这种,array本身就可以实现。
set是通过has方法返回true or false,在数组中可以通过includes代替。
举例:ab.filter(x=>b.includes(x));
7-7 修改用户的角色信息
前面已经说了,character角色信息存储在了store上,不依赖于js,但是可以在任意js或vue页面(在vue
中使用需要先在js中赋值)中使用。
那么,想要显示用户的角色title,根据user的character也就是character的id去获取character的title,
就新建一个js文件,专门实现这一功能,也就是说在fe/src/helpers/character/index.js中:
(话说character的请求只是在创建state的时候通过actions触发过一次而已耶,也就是说character的信息
早就存好了放在store里,不再涉及相关character请求~)
import store from ‘@/store’
export const getCharacterById = ( id ) = >{
const { characterInfo } = store.state;
const one = characterInfo.find((item)=>return item._id === id );
…后面不写了
反正最后return one就行
把getCharacterById引入js中,通过return导出模板,在模板中就可以写下:
< template #character="{record}" > //record就是dataSource的一列信息。
{{ getCharacterById(record.character).title }}
记住子元素会继承父元素的颜色,文本等设置样式。
< a - modal v-model:visible = "true " > 显示弹窗
这个业务感觉没啥好写的,不写了。
7-8 打通认证体系,让前端知道当前用户的角色。
其实就是做权限的控制。 ( 权限!好好学!)
从登录开始慢慢对接。必须知道当前用户登录的角色是什么。
在登录的时候就需要知道用户的角色。
所以第一步:
后端设置ctx.body,返回的data中需要有character的值。
也就是user有character属性值。
第二步:(设置userInfo为全局信息)
用户信息应该是全局信息,任何地方都可以被访问到。
so,用户信息应该放在vuex中。
store/index.js下state新增:
state:{
userInfo:{}
}
…剩下的流程基本上跟characterInfo是一样的,不同的是因为user是在操作登录流程后生成的,
不同于character是独立在一整个应用层面生成的,所以userInfo不需要用到“actions",
在登录操作成功之后对userInfo进行赋值,也就是说:
reult(res).success(({msg,data:{user}}) = {
message.success(msg);
store.commit(‘setUserInfo’,user);------>在这一步之后,userInfo的值就拿到了(里面有character的id)
ps:当对业务越来越了解的时候,也就知道了userInfo和characterInfo应该在哪里被创建。
第三步:(设置用户角色为全局信息–把用户和角色关联起来)
在store中创建userCharacter,
也就是说现在一共有三个
state:{
characterInfo:[],
userInfo:{},
userCharacter:{},
}
userCharacter的mutations做法与characterInfo和userInfo一致。所有设置基本上跟userInfo一样。
(都是在登陆页面完成)
依旧是在登录页面:
import { getCharacterInfoById } from ‘@/helpers/utils’
设置也是在登录成功,设置用户信息之后:
store.commit(‘setUserCharacter’,getCharacterInfoById(user.character));
设置用户信息成功之后,就给用户信息设置跳转页面吧,router.replace(’/books’)素的,
就是用replace方法,登录就是用replace
业务方面一个小知识:像跳转页面这种,最好把页面都写完了再来写跳转页面这个业务。
extra:关于router和route对象,router是import { useRouter } from 'vue-router’来的,
通过new useRouter() 得到的,有router.push和router.replace,像router.replace就很适合删除操作,
以及登录操作之后。
route呢,可以拿到id.route是useRoute实例出来的,通过url可以拿到id, route.params.id。
vuex是放在内存中的,不是放在页面中的,所以跳转页面后信息会消失在页面中。
又重新看了一下7-8,来复盘一下一整个的逻辑以及重点。
从token一整个流程说起,就是当前端用户登录后,后端校验成功并生成token,将token加密后返回给用户(这个加密后返回就是.success,也就是登录成功后的then)(因为后端有一个接口,可以通过用户传来的token解析用户信息,也就是payload),用户获取token信息后,将token信息保存在localstorage,保存的时刻就是在登录成功后,也就是.success。
token被保存在localstorage,发起请求时在请求头authorization中。
token认证完成以后,在router.beforeEach(路由守卫),也就是路由每次跳转的时候,用户信息都可以通过token去拿到。(用户信息通过token拿到就是因为后端有一个接口,可以解密token拿到user信息也就是payload),这个请求被封装在了getUserInfo
一些重要的知识点:
前端部分:
1.characterInfo之所以哪个页面都访问得到不仅是因为它是全局的存在store的,更准确来说,是因为它被写在了router.beforeEach。(characterInfo就是之前说的凌驾于应用层面之上的用户权限信息)
2.getUserinfo也是写在store里的,它获取用户信息不是通过登录接口,而是可以根据token获取用户信息的info接口(后端根据token获取用户信息的方法是: await verify(getToken(ctx)) ,在getToken(ctx)中,let {authorization} = ctx.header ; authoraization.replace(‘bearer’ , ’ ') )。调用getToken的接口依旧是router.beforeEach.
3.用户的信息要全局是因为它包括了character属性。
4.前端把token藏在authorization请求头里。authoraztion比起token就是多了个bearer,通过字符串的方法replace去掉bearer获取token就行。
5.其实vuex是localstorage的一种代替方式,可以说是为localstorage分担一些吧,但是因为vuex是存在内存的,页面消失信息会被销毁,所以需要router.beforeEach帮忙。需要用token作为令牌。
6.咱就是说,vuex跟localstorage一样的地位,store单独拎出来一个地方写了,token也要单独拎出来一个地方给它用。
后端部分:
1.了解token本身是什么,也就知道是怎么通过token获取用户信息的了,因为token本身包含payload,payload里存的就是用户信息,通过解密就可以解出payload。
var token = jwt.sign({
account: ‘a.cc.com’,
_id: ‘123’,
}, ‘aaaa’);
2.其实对于后端来讲就是多了一个通过token获取用户信息的接口。
1218

被折叠的 条评论
为什么被折叠?



