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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 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
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
parentElement,srcElement的使用小结
2014/01/13 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
js和jquery实现监听键盘事件示例代码
2020/06/24 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
小结Python用fork来创建子进程注意事项
2014/07/03 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
求职信格式范本
2013/11/15 职场文书
升国旗仪式主持词
2014/03/19 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
践行三严三实心得体会
2014/10/13 职场文书
文艺节目主持词
2015/07/06 职场文书
趣味运动会广播稿
2015/08/19 职场文书
2015年学校消防安全工作总结
2015/10/14 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android