利用vuex实现用户登录,token存入localstorage

227 阅读1分钟

vuex是一个状态管理库,我们可以将各个组件中拿到的数据或者方法存入其中,后续拿取使用就很方面。

本次的登录案例很简单,

输入用户名、密码,经由后端接口验证通过后登录成功跳转其他界面。

同时token数据需要存储本地,同时各类数据也要存储在vuex中,以便后续使用。

image.png

当前端第一次验证通过之后,用户名和密码会跟随请求传到store里面的异步方法,等待后端验证,根据返回的结果再决定是否登录成功

image.png

这个异步方法会调用我们的登录API并等待回复,如果得到resolve,那么就会终端提示登录成功,将返回的数据转换成字符串存入本地

并携带拿到的数据,调用同步方法

image.png

而这里的同步方法,会将拿到的一堆参数包括token全部存入我们的state数据当中,至此一次登录就算是完成了,同时数据也保存在store中,后续可以各处使用。

image.png

image.png

这里顺带解释一下上面的登录API,其实没有啥,就是利用axios发送请求

image.png

这里我们把axios实例封装到了utils/request里面是为了写请求拦截和响应拦截,这样写的好处是,后续所有的请求都在API中,而对于请求数据和响应数据的处理就全在request里面

另外

这里的弹出提示登录成功,用了element-ui的提示;而跳转用的则是router实例的push方法