vue路由守衛+cookie實現頁面跳轉時驗證用戶是否登錄----（一）cookie篇

vue項目中登錄頁面用戶登錄成功后，會把用戶信息存儲到cookie中，然后跳轉進入首頁，當用戶沒有登錄時，直接輸入頁面地址會經過路由守衛檢測cookie中是否存在用戶信息，如果不存在，重定向到登錄頁讓用戶進行登錄。接下來從配置cookie方法開始。

首先在項目中新建util/cookie.js文件作為存放cookie方法的js

 

 

 在cookie.js中寫進如下代碼，該代碼封裝的三個方法，setCookie:存儲cookie； getCookie:讀取cookie； clearCookie:刪除指定cookie；最后把這三個方法導出，便於全局調用，每行代碼具體什么意思可觀看以下教程：cookie教程一，cookie教程二，講解的非常詳細。

/**
 * @description 保存cookie
 * @param {Object} json 需要存儲cookie的對象
 * @param {Number} days 默認存儲多少天
 */
function setCookie(json, days) {
    // 設置過期時間
    let data = new Date(
        new Date().getTime() + days * 24 * 60 * 60 * 1000
    ).toUTCString();

    for (var key in json) {
        document.cookie = key + "=" + json[key] + "; expires=" + data;
    }
}

/** 
 * @description 獲取cookie
 * @param {String} name 需要獲取cookie的key
 */
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) {
        return unescape(arr[2])
    } else {
        return null
    }
}

/** 
 * @description 刪除cookie
 * @param {String} name 需要刪除cookie的key
 */
function clearCookie(name) {
    let json = {};
    json[name] = '';
    setCookie(json, -1)
}

export default {
    setCookie,
    getCookie,
    clearCookie
}

然后在main.js中引入剛剛寫好的cookie.js，並通過Vue.prototype設置cookie這個字段作為全局變量

 

 引入完畢之后就可以在任意頁面中通過 this.cookie.方法名（值）來增刪查cookie。

this.cookie.setCookie()   //存cookie

this.cookie.getCookie()  //讀cookie

this.cookie.clearCookie()   //刪cookie

首先在項目中創建登錄頁Login.vue編寫登錄頁面，登陸成功之后通過this.cookie.setCookie往cookie中存入用戶信息。

<template>
  <div>
    <form action>
      <div>
        賬號：
        <input type="text" v-model="name" />
      </div>
      <div>
        密碼：
        <input type="password" v-model="password" />
      </div>
      <div>
        <button @click="login" type="submit">登錄</button> 
      </div>
    </form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      name: "",
      password: ""
    };
  },
  methods: {    
    login() {
        if (!this.name) {
          alert("請填寫賬號");
          return;
        }
        if (!this.password) {
          alert("請輸入密碼");
          return;
        }
        if(this.password&&this.name){
          // 以json格式傳給setCookie方法存入信息,方法里面會循環遍歷該json以單個數據存儲的方式，多次存入cookie中
　　　　　　// 注：cookie不支持直接以json的方式存入
          let loginInfo={
            LoginName:this.name,
            openId:"asfafsfsfsdfsdfsdfdsf"
          }
          // 調用setCookie方法，同時傳遞需要存儲的數據，保存天數
          this.cookie.setCookie(loginInfo,7)
          alert("登錄成功")
          // 跳轉到首頁
          this.$router.replace('/')
        }
    }
  }
};
</script>

登陸成功之后再瀏覽器的cookie中可以看到存進去的LoginName，openId，以及他們的過期時間。

 

 

 

 登錄成功我們跳轉到了home.vue頁面，通過this.getCookie( "LoginName" )獲取一下登錄名。

 

 

 

 然后點擊退出的時候需要清除一下cookie，然后返回登錄頁。

 

 點擊退出之后清除cookie，並且跳轉到了登錄頁面，現在去查看cookie

 

 發現里面是空白的。

至此我們第一步基本完成了，接下在跳轉時要驗證cookie里面是否有登錄信息，如果沒有則不讓跳轉並且跳轉到登錄頁。也就是要用到路由守衛。