Vue.js寫一個SPA登入頁面的實例

技術堆疊

• vue.js 主框架

• #vuex 狀態管理

• vue -router 路由管理

一般程序

在一般的登入過程中，一個前端方案是：

1. ##檢查狀態：進入頁面時或路由變更時檢查是否有登入狀態(儲存在

   cookie或本機儲存的值)；

##如果有登入態則查詢登入資訊(uid，頭像等...)並儲存起來；如果沒有則跳到登入頁面；
在登入頁面（或是登入框），校檢使用者輸入資訊是否合法；
校檢透過後發送登入要求；校檢不成功則回饋給使用者；
登入成功則從後端資料中取出
5. session

   訊息保存登入狀態(可能需要跳轉);登入不成功則提示使用者不成功；

使用者做出登出操作時刪除登入狀態。
下面我根據列出的步驟一一分析如何做程式碼實現，所有在程式碼在中，並帶有較詳細註解幫助理解程式碼。

在此之前假設登入頁面路由為

/login

，登入後的路由為/user_info。這樣只需要在App.vue放好router-view用來存放和渲染這兩個路由。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// component/App.vue &lt;template&gt;&lt;div class=&quot;container&quot; id=&quot;app&quot;&gt; &lt;transition name=&quot;fade&quot;&gt;&lt;keep-alive&gt; &lt;router-view&gt;&lt;/router-view&gt;&lt;/keep-alive&gt; &lt;/transition&gt;&lt;/div&gt;&lt;/template&gt; ...</pre><div class="contentsignin">登入後複製</div></div>並做好

vue-router

設定:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// js/app.jsimport Vue from &amp;#39;vue&amp;#39;import VueRouter from &amp;#39;vue-router&amp;#39;import Login from &amp;#39;../component/Login.vue&amp;#39;import UserInfo from &amp;#39;../component/UserInfo.vue&amp;#39; Vue.use(VueRouter);const router = new VueRouter({ routes: [{path: &amp;#39;/login&amp;#39;,component: Login }, {path: &amp;#39;/user_info&amp;#39;,component: UserInfo }] }) ...</pre><div class="contentsignin">登入後複製</div></div>檢查狀態與跳轉

兩個時候我們需要檢查狀態：

1.使用者開啟頁面時；

 2.路由發生變化時；#首先需要寫好一個檢查登入態的方法

checkLogin

：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// js/app.js ... var app = new Vue({ data: {}, el: &amp;#39;#app&amp;#39;, render: h =&gt; h(App), router, store, methods:{ checkLogin(){ //检查是否存在session //cookie操作方法在源码里有或者参考网上的即可 if(!this.getCookie(&amp;#39;session&amp;#39;)){//如果没有登录状态则跳转到登录页this.$router.push(&amp;#39;/login&amp;#39;); }else{//否则跳转到登录后的页面this.$router.push(&amp;#39;/user_info&amp;#39;); } } } })</pre><div class="contentsignin">登入後複製</div></div>為了提升使用者體驗，當使用者開啟頁面時前端需要檢查他是否已經登錄，不需要使用者再次登入。這個實作很簡單,我們在

vue實例

的created鉤子裡寫好：<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>// js/app.js ... var app = new Vue({ ... created() {this.checkLogin(); }, methods:{ checkLogin(){ ... } } })</pre><div class="contentsignin">登入後複製</div></div>另外，

路由

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

#用戶在進入頁面時存在登入狀態，但在做操作時正好登入過期了；
使用者手動刪除了
• 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: &#39;Doterlin&#39;,ulevel: 20,uid: &#39;10000&#39;,portrait: &#39;images/profile.png&#39;
      }      //获取信息请求
      ts.$http.get(url, {//参数"params": this.userInfo
      }).then((response) => {//Successif(response.data.code == 0){          this.$store.commit(&#39;updateUserInfo&#39;, 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="&#39;log-input&#39; + (account==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)" v-model="account"><input type="password" placeholder="Password" :class="&#39;log-input&#39; + (password==&#39;&#39;?&#39; log-input-empty&#39;:&#39;&#39;)"  v-model="password"><a href="javascript:;" class="log-btn" @click="login">Login</a></div>
    ...</div></template><script>import Loading from &#39;./Loading.vue&#39;export default {  name: &#39;Login&#39;,
  data(){      return {          isLoging: false,          account: &#39;&#39;,          password: &#39;&#39;
      }
  },  components:{
    Loading
  },  methods:{      //登录逻辑
      login(){          if(this.account!=&#39;&#39; && this.password!=&#39;&#39;){              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個步驟了。最後一步就是註銷。

註銷

登出時有的需要請求後端有的不需要，關鍵的事要刪除已儲存的登入狀態：

<code class="javascript"><span class="hljs-comment">// component/UserInfo.vue
...
   logout(){      <span class="hljs-comment">//删除cookie并跳到登录页      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">true;      <span class="hljs-comment">//请求后端，比如logout.php      <span class="hljs-comment">// this.$http.post(&#39;eaxmple.com/logout.php&#39;)...      <span class="hljs-comment">//成功后删除cookie      <span class="hljs-keyword">this.delCookie(<span class="hljs-string">&#39;session&#39;);      <span class="hljs-comment">//重置loding状态      <span class="hljs-keyword">this.isLogouting = <span class="hljs-literal">false;      <span class="hljs-comment">//跳转到登录页      <span class="hljs-keyword">this.$router.push(<span class="hljs-string">&#39;/login/&#39;);
    }
..</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code><br/>

#

以上是Vue.js寫一個SPA登入頁面的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！