1.在登录页点击登录的时候,前端会带着用户名和密码去调用后端的登录接口
2.后端收到请求,验证用户名和密码,若验证失败,返回错误信息,前端提示相应的错误信息。如果验证成功,就会给前端返回一个token
3.前端拿到token,将token存储到vuex和localStorage中,并跳转页面,即登录成功
4.前端每次跳转至需要具备登录状态页面时,都需要判断当前token是否存在,不存在就跳转到登录页,存在则正常跳转(通常封装在路由守卫中)
5.最后,前端在向后端发送其他请求的时候,需要在请求头中带上token(项目中通常封装在请求拦截器中),后端判断请求头中有无token,有则验证该token,验证成功就正常返回数据,验证失败(如已过期)则返回相应错误码。前端拿到错误信息,清除token并回退至登录页
补充后续面试官继续追问的问题(对登录流程进一步的梳理和思考)
1.这个token的值是我们在登录也就是login.vue这个页面从后端获得的。但是我们利用这个token值获取用户信息是在另一个页面(个人中心,我的)。也就是说我们在登录页面获取token,在“我的”页面通过token请求用户名放到对应位置
2.在登录界面我们主要是通过localstorage来把token值存到本地。核心代码:
localStorage.setItem("token",res.data.data.token)
//表示把res.data.data.token这个value存储到本地的“token”这个key里面
3.什么时候在localStorage中取token?
created(){
//页面加载时就从本地通过localstorage获取存储的token值
this.token = localStorage.getItem('token')
},
在created中,此时数据已经创建完毕,可以在localStorage中拿到持久化存储的token