1、localstorage :
利用 localStorage.setItem(); 存储数据
利用 localStorage.getItem(); 读取数据
优点:通过这种方法将数据存在了硬盘里,不会根据浏览器的刷新,关闭而丢失数据。
缺点:这种方式存储的数据,可以直接在控制台看的到,用户信息不安全。
2、cookie 会话cookie存在内存里,持久化cookie存在硬盘里,需要手动删除
输入用户名,密码 ,向服务器发送请求=======》
服务器判断cookie,(服务端有session,sessionId)====》
如果没有问题服务器会创建cookie(会话cookie),然后通过maxAge设置cookie的有效期,将其转为持久化cookie。=====》
服务器响应用户数据对象给浏览器,别携带cookie(包含sessionId或者userId)===》
自动登录,调用接口时需要携带cookie====》
服务器校验cookie,如果没问题则根据cookie包含的sessionId或者userId寻找相对应的用户数据,并返回。如果有问题,那么就会抛出错误===!!!
3、token
输入账号,密码,进行登录====》后台创建Tooken,并且加密,有有效期,携带用户ID;
服务器返回一个数据对象,我们就可以拿到用户信息,展示用户数据。====》
将数据中携带的Tooken取出来存到vuex中一份,可以在发送请求携带Tooken时直接从vuex中获取到。但是我们关闭浏览器的时候,vuex(vuex在内存里)中的数据就没有了。所以我们需要将Tooken存在localStorage中一份,当我们再次打开浏览器的时候,我们就会从localStorage中拿到Tooken放到vuex中。vuex中读取数据要比localStorage中快。=====》
自动登录时调用接口,并且携带Tooken===》后台进行验证,如果没问题就返回用户信息,如果有问题,那么就说明Tooken过期了,如果有问题===》
在ajax中封装两个拦截器,请求拦截器中判断是否需要携带Tooken,判断Tooken中有没有值,如果没有值,抛出错误,如果有值,那么就放到请求头里面。响应拦截器中判断有没有Tooken,判断是否过期,判断请求是否有问题(看状态码)