Vue+Vuex实现自动登录的知识点详解


Posted in Javascript onMarch 04, 2020

在之前实现的版本中,如果你进行测试,可以看到在浏览器的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实现自动登录的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javascript求日期差的方法
Mar 02 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
vuex入门最详细整理
Mar 04 #Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 #Javascript
vue 自定义组件的写法与用法详解
Mar 04 #Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 #Javascript
vue请求数据的三种方式
Mar 04 #Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 #Javascript
JS中==、===你分清楚了吗
Mar 04 #Javascript
You might like
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
2020/07/28 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python 爬取携程所有机票的实例代码
2018/06/11 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
详解Python的三种可变参数
2019/05/08 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
市级青年文明号申报材料
2014/05/26 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
导游词之山东孔庙
2019/11/04 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS