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

技術棧

  • 香港彩票透码 www.kptln.icu vue.js 主框架

  • vuex 狀態管理

  • vue-router 路由管理

  • 一般過程

    在一般的登錄過程中,一種前端方案是:

    1. 檢查狀態:進入頁面時或者路由變化時檢查是否有登錄狀態(保存在cookie或者本地存儲的值);

    2. 如果有登錄態則查詢登錄信息(uid,頭像等...)并保存起來;如果沒有則跳轉到登錄頁;

    3. 在登錄頁面(或者登錄框),校檢用戶輸入信息是否合法;

    4. 校檢通過后發送登錄請求;校檢不成功則反饋給用戶;

    5. 登錄成功則從后端數據中取出session信息保存登錄狀態(可能需要跳轉);登錄不成功則提示用戶不成功;

    6. 用戶做出注銷操作時刪除登錄狀態。

    下面我根據列出的步驟一一分析如何做代碼實現,所有在代碼在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:'//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/');
     }
    ...

  • 來源:itnose

上一篇: 【筆記】JS的事件冒泡 和 事件捕獲

下一篇: 淘寶NPM源的使用

分享到: 更多
金吊桶论坛稳赚包六肖下载 棋牌大师下载 排列三组六稳赚的投注技巧 重庆时彩大小单双稳赚绝招 什么彩票计划软件好用 11选5前三定胆技巧 时时彩组六720注号码 分分彩软件计划苹果手机版 快彩电视走势图下载 飞艇一期计划软件 app 极速3d全天计划 快络牛牛上下分 打麻将十句必胜口诀 扑克二八杠怎么玩 2017北京pk10官网直播 重庆时时彩杀号技巧