怎么在Vue中利用Vuex實(shí)現(xiàn)一個(gè)自動(dòng)登錄功能

本篇文章給大家分享的是有關(guān)怎么在Vue中利用Vuex實(shí)現(xiàn)一個(gè)自動(dòng)登錄功能，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

一、我們所加的Authorzation其實(shí)并不是從服務(wù)器傳過(guò)來(lái)的，而是自己的測(cè)試：只要服務(wù)器傳過(guò)來(lái)了200的響應(yīng)狀態(tài)碼，我們就自己加上固定的Authorization

二、我們重新進(jìn)入的時(shí)候，判斷條件是只要有Authorization就可以直接進(jìn)入了，但其實(shí)應(yīng)該提交給服務(wù)器判斷這個(gè)Authorization是否在數(shù)據(jù)庫(kù)中，才可以。

基于以上兩點(diǎn)，我們對(duì)代碼進(jìn)行修改：

首先就是，我們獲取的token應(yīng)該是從服務(wù)器獲取的，而不是自己給定，因此直接在服務(wù)器上接收到信息后修改：

@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直接生成隨機(jī)的token，為了用respBean傳遞回去數(shù)據(jù)，因此傳遞回去的對(duì)象除了狀態(tài)信息和消息之外，還需要多加一個(gè)token：

RespBean對(duì)象代碼為：

  public class RespBean {
  private String status;
  private String msg;
  private String token = null;
}

各種方法自己加上就好了。

如果仔細(xì)的話，會(huì)發(fā)現(xiàn)我們傳進(jìn)來(lái)的參數(shù)好像跟上一次的不一樣了，上一次傳遞了兩個(gè)用@RequestParam修飾的賬號(hào)密碼的String類型的對(duì)象，而這一次直接傳遞了一個(gè)UserLogin的對(duì)象，這是因?yàn)槲矣X(jué)得如果要接收表單等信息的話，每一個(gè)都使用這樣的一個(gè)個(gè)參數(shù)會(huì)顯得接收參數(shù)很多，而且如果要修改接收的數(shù)值的話，可能需要很多地方都要修改，復(fù)用性太差了。

第二個(gè)原因是我們的Controller層應(yīng)該只是最大限度的邏輯表示，而具體怎么添加用戶、怎么鑒別用戶是否登錄等信息，完完全全應(yīng)該交給下層的Service層呀Mapper層呀去做，但如果接收的是這樣的password、username等數(shù)值的話，調(diào)用下一層的時(shí)候，我們還需要把這些數(shù)值直接放入，否則就要在Controller層對(duì)數(shù)據(jù)進(jìn)行操作，這就破壞層次結(jié)構(gòu)了。

所以，為了解決這個(gè)問(wèn)題，我們可以把所有表單中需要用到的數(shù)據(jù)單獨(dú)封裝成一個(gè)對(duì)象，這個(gè)對(duì)象就專門用來(lái)接收web的數(shù)據(jù)以及在各個(gè)層之間流轉(zhuǎn)：

java @Data public class UserLogin { private String username; private String password; }把，
這里的@Data注解就是lombok的注解，可以讓我們不用再去創(chuàng)建get、set等方法了。這樣創(chuàng)建完對(duì)象以后，我們的登錄操作就可以直接將這樣的對(duì)象拿來(lái)使用了。

但是，如果你是跟著做下來(lái)的，就會(huì)遇到跟我一樣的問(wèn)題：登錄的時(shí)候會(huì)報(bào)錯(cuò)：

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')

大概的意思就是說(shuō)，我們接受的跟發(fā)出的不大一樣，對(duì)應(yīng)不上，而這樣的原因是：我們當(dāng)時(shí)為了使用get和@RequestParam方法，在api.js中，把獲取到的json數(shù)據(jù)格式，變成了json字符串的格式了，所以就不能使用@RequestBody這樣一個(gè)接收json對(duì)象的方法來(lái)接收了。

因此上一個(gè)程序中的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'
  }
 });
}

詳細(xì)的可以看一下這個(gè)文章@RequestBody和@RequestParam的區(qū)別

而第二點(diǎn)，關(guān)于如何實(shí)現(xiàn)鑒別token，就是在路由之前的那個(gè)方法上，加上傳遞給服務(wù)器以及接收相應(yīng)信息進(jìn)行操作：

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('請(qǐng)求失敗', '失敗!');
    }
   })
  }
 }
});

以上就是怎么在Vue中利用Vuex實(shí)現(xiàn)一個(gè)自動(dòng)登錄功能，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。