在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面。但其实有好几个问题并没有解决:
一、我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization
二、我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个Authorization是否在数据库中,才可以。
基于以上两点,我们对代码进行修改:
首先就是,我们获取的token应该是从服务器获取的,而不是自己给定,因此直接在服务器上接收到信息后修改:
@RequestMapping(value = "/login",method = RequestMethod.POST) public RespBean login( @RequestBody UserLogin userLogin, Model model ){ if (userService.check(userLogin)){ String token = UUID.randomUUID().toString(); // System.out.println(token); userService.autoLog(userLogin,token); return new RespBean("success","登录成功",token); }else{ return new RespBean("fail","登录失败"); } }
这里使用uuid直接生成随机的token,为了用respBean传递回去数据,因此传递回去的对象除了状态信息和消息之外,还需要多加一个token:
RespBean对象代码为:
public class RespBean { private String status; private String msg; private String token = null; }
各种方法自己加上就好了。
如果仔细的话,会发现我们传进来的参数好像跟上一次的不一样了,上一次传递了两个用@RequestParam修饰的账号密码的String类型的对象,而这一次直接传递了一个UserLogin的对象,这是因为我觉得如果要接收表单等信息的话,每一个都使用这样的一个个参数会显得接收参数很多,而且如果要修改接收的数值的话,可能需要很多地方都要修改,复用性太差了。
第二个原因是我们的Controller层应该只是最大限度的逻辑表示,而具体怎么添加用户、怎么鉴别用户是否登录等信息,完完全全应该交给下层的Service层呀Mapper层呀去做,但如果接收的是这样的password、username等数值的话,调用下一层的时候,我们还需要把这些数值直接放入,否则就要在Controller层对数据进行操作,这就破坏层次结构了。
所以,为了解决这个问题,我们可以把所有表单中需要用到的数据单独封装成一个对象,这个对象就专门用来接收web的数据以及在各个层之间流转:
java @Data public class UserLogin { private String username; private String password; }
把,
这里的@Data注解就是lombok的注解,可以让我们不用再去创建get、set等方法了。这样创建完对象以后,我们的登录操作就可以直接将这样的对象拿来使用了。
但是,如果你是跟着做下来的,就会遇到跟我一样的问题:登录的时候会报错:
Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unrecognized token 'username': was expecting (JSON String, Number, Array, Object or token 'null', 'true' or 'false'); nested exception is com.fasterxml.jackson.core.JsonParseException: Unrecognized token 'username': was expecting (JSON String, Number, Array, Object or token 'null', 'true' or 'false')
大概的意思就是说,我们接受的跟发出的不大一样,对应不上,而这样的原因是:我们当时为了使用get和@RequestParam方法,在api.js中,把获取到的json数据格式,变成了json字符串的格式了,所以就不能使用@RequestBody这样一个接收json对象的方法来接收了。
因此上一个程序中的api.js改为:
export const postRequest = (url, params) => { return axios({ method: 'post', url: `${base}${url}`, data: params, // transformRequest: [function (data) { // // Do whatever you want to transform the data // let ret = '' // for (let it in data) { // ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' // } // return ret // }], headers: { 'Content-Type': 'application/json;charset=UTF-8' } }); }
详细的可以看一下这个文章@RequestBody和@RequestParam的区别
而第二点,关于如何实现鉴别token,就是在路由之前的那个方法上,加上传递给服务器以及接收相应信息进行操作:
router.beforeEach((to,from,next)=>{ if(to.path ==='/login'){ next(); }else { let token = localStorage.getItem('Authorization'); if(token ===null || token ===''){ next('/login'); }else { getRequest('/autoLog',{ token:token }).then(resp=>{ if(resp.status == 200){ var json = resp.data; if(json.status=='success'){ next(); }else{ // next('/login'); } }else{ alert('请求失败', '失败!'); } }) } } });
服务器的处理也就很简单了,跟上面登录其实是差不多的,就不再列举出来了
以上就是Vue+Vuex实现自动登录的知识点详解的详细内容,更多关于Vue+Vuex实现自动登录的资料请关注其它相关文章!
Vue,Vuex,自动登录
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。