前端面试题--前端登录流程（项目描述）

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