Vue.js寫一個SPA登錄頁面的過程

技術棧 vue.js 主框架 vuex 狀態管理 vue-router 路由管理一般過程在一般的登錄過程中，一種前端方案是：下麵我根據列出的步驟一一分析如何做代碼實現，所有在代碼在https://github.com/doterlin/vue-example-login中，並帶有較詳細註釋幫助 ...

技術棧

vue.js 主框架
vuex 狀態管理
vue-router 路由管理

一般過程

在一般的登錄過程中，一種前端方案是：

檢查狀態：進入頁面時或者路由變化時檢查是否有登錄狀態(保存在cookie或者本地存儲的值)；
如果有登錄態則查詢登錄信息(uid，頭像等...)並保存起來；如果沒有則跳轉到登錄頁；
在登錄頁面（或者登錄框），校檢用戶輸入信息是否合法；
校檢通過後發送登錄請求；校檢不成功則反饋給用戶；
登錄成功則從後端數據中取出session信息保存登錄狀態(可能需要跳轉);登錄不成功則提示用戶不成功；
用戶做出註銷操作時刪除登錄狀態。

下麵我根據列出的步驟一一分析如何做代碼實現，所有在代碼在https://github.com/doterlin/vue-example-login中，並帶有較詳細註釋幫助理解代碼。

在此之前假設登錄頁面路由為/login，登錄後的路由為/user_info。這樣只需要在App.vue放好router-view用於存放和渲染這兩個路由。

// component/App.vue
<template>
<div class="container" id="app">
  <transition name="fade">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </transition>
</div>
</template>
...

並做好vue-router配置:

// js/app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../component/Login.vue'
import UserInfo from '../component/UserInfo.vue'

Vue.use(VueRouter);
const router = new VueRouter({
  routes: [{
    path: '/login',
    component: Login
  }, {
    path: '/user_info',
    component: UserInfo
  }]
})
...

檢查狀態與跳轉

在兩個時候我們需要檢查狀態：1.用戶打開頁面時； 2.路由發生變化時；

首先需要寫好一個檢查登錄態的方法checkLogin：

// js/app.js
...
var app = new Vue({
  data: {},
  el: '#app',
  render: h => h(App),
  router,
  store,
  methods:{
    checkLogin(){
      //檢查是否存在session
      //cookie操作方法在源碼里有或者參考網上的即可
      if(!this.getCookie('session')){
        //如果沒有登錄狀態則跳轉到登錄頁
        this.$router.push('/login');
      }else{
        //否則跳轉到登錄後的頁面
        this.$router.push('/user_info');
      }
    }
  }
})

為了提升用戶體驗，當用戶打開頁面時前端需要檢查他是否已經登錄，不需要用戶再次登錄。這個實現很簡單,我們在vue實例的created鉤子里寫好：

// js/app.js
...
var app = new Vue({
  ...
  created() {
    this.checkLogin();
  },
  methods:{
    checkLogin(){
     ...
    }
  }
})

另外，路由發生變化時也需要檢查登錄，以下情景(路由變化)如果我們不檢查登錄態可能會發生錯誤：

用戶在進入頁面時存在登錄狀態，但在做操作時正好登錄過期了；
用戶手動刪除了cookie/本地storage並做操作；
用戶在未登錄的情況下手動輸入(或者從收藏夾進入)某個需要登錄的路由
用戶在已登錄的情況下進入登錄頁路由

這些足夠成為我們監聽路由的理由，實現的話可以利用vue的watch功能：

// js/app.js
...
var app = new Vue({
  ...
  //監聽路由檢查登錄
  watch:{
    "$route" : 'checkLogin'
  },

  //進入頁面時
  created() {
    this.checkLogin();
  },

  methods:{
    checkLogin(){
     ...
    }
  }
})

至此，我們就完成了一般過程中的第1步。接下來實現如何獲取用戶個人信息。

獲取用戶信息

在成功登錄後，我們一般需要從後端顯示用戶的一些信息，比如昵稱，頭像，等級等等...獲取的話很簡單，發一個http請求從後端拉取；但是一般這些信息會在多的路由用到（比如uid一般都需要在各個後端介面中作為參數帶上），所以需要保存到全局狀態中(vuex)：

// component/App.vue
...
<script>
export default {
  ...
  mounted(){
    //組件開始掛載時獲取用戶信息
    this.getUserInfo();
  },
  methods: {
    //請求用戶的一些信息
    getUserInfo(){
      this.userInfo = {
        nick: 'Doterlin',
        ulevel: 20,
        uid: '10000',
        portrait: 'images/profile.png'
      }

      //獲取信息請求
      ts.$http.get(url, {
        //參數
        "params": this.userInfo
      }).then((response) => {
        //Success
        if(response.data.code == 0){
          this.$store.commit('updateUserInfo', this.userInfo); 
        }
      }, (response) => {
        //Error
      });

    }
  }
}
</script>
...

當然我們需要在之前配置好，比如在寫在app.js或者單獨寫成store.js併在app.js引入（推薦）：

// js/app.js
// Vuex配置
...
const store = new Vuex.Store({
  state: {
    domain:'http://test.example.com', //保存後臺請求的地址，修改時方便（比方說從測試服改成正式服功能變數名稱）
    userInfo: { //保存用戶信息
      nick: null,
      ulevel: null,
      uid: null,
      portrait: null
    }
  },
  mutations: {
    //更新用戶信息
    updateUserInfo(state, newUserInfo) {
      state.userInfo = newUserInfo;
    }
  }
})
...

輸入校驗和發送登錄請求

為了防止一些不符合預期的字元和過於頻繁的請求傳到後臺，前端要對用戶的輸入進行校驗和防止重覆請求。當然不同網站的合法字元不一樣，這裡只做為空時不合法的校驗：

//component/Login.vue
<template>
<div class="login" id="login">
   ...
    <div class="log-email">
        <input type="text" placeholder="Email" :class="'log-input' + (account==''?' log-input-empty':'')" v-model="account"><input type="password" placeholder="Password" :class="'log-input' + (password==''?' log-input-empty':'')"  v-model="password">
        <a href="javascript:;" class="log-btn" @click="login">Login</a>
    </div>
    ...
</div>
</template>
<script>
import Loading from './Loading.vue'
export default {
  name: 'Login',
  data(){
      return {
          isLoging: false,
          account: '',
          password: ''
      }
  },
  components:{
    Loading
  },
  methods:{

      //登錄邏輯
      login(){
          if(this.account!='' && this.password!=''){
              this.toLogin();
          }
      }

}
</script>
...

這裡的this.toLogin就是登錄請求的方法，在post密碼到後端時不是直接發送，一般會按照後端定的規則加密後在發送，比如哈希演算法，例子進行了的雙重哈希加密，引用了js/sha1.min.js，大致實現如下：

...
      //登錄請求
      toLogin(){

          //一般要跟後端瞭解密碼的加密規則
          //這裡例子用的哈希演算法來自./js/sha1.min.js
          let password_sha = hex_sha1(hex_sha1( this.password ));

          //需要想後端發送的登錄參數
          let loginParam = {
              account: this.account,
              password_sha
          }

          //設置在登錄狀態
          this.isLoging = true;

          //請求後端
          this.$http.post( 'example.com/login.php', {
          param: loginParam).then((response) => {
            if(response.data.code == 1){
              //如果登錄成功則保存登錄狀態並設置有效期
              let expireDays = 1000 * 60 * 60 * 24 * 15;
              this.setCookie('session', response.data.session, expireDays);
              //跳轉
              this.$router.push('/user_info'); 
            }
          }, (response) => {
            //Error
          });

...

這樣就完成了第3,4,5個步驟了。最後一步就是註銷。

註銷

註銷時有的需要請求後端有的不需要，關鍵的事要刪除保存的登錄狀態：

// component/UserInfo.vue
...
   logout(){
      //刪除cookie並跳到登錄頁
      this.isLogouting = true;
      //請求後端，比如logout.php
      // this.$http.post('eaxmple.com/logout.php')...
      //成功後刪除cookie
      this.delCookie('session');

      //重置loding狀態
      this.isLogouting = false;

      //跳轉到登錄頁
      this.$router.push('/login/');
    }
...

學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！