vue+element-ui +axios+less+webpack 實現登錄退出功能

先來看效果

登錄退出功能依賴數據庫後臺的一些配置，這裏只是使用vue來實現這個功能

1：首先使用 vue腳手架可視化圖形界面，搭建vue項目

項目搭建完畢
2：開啓數據庫，並且將數據導入數據庫

3：開啓服務器，這裏是node寫的服務器

下面開始寫登錄退出功能

1. 界面的繪製

 <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/logo.png" alt />
      </div>
      <!-- 表單區域 -->
      <el-form class="login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRefs">
        <!-- 用戶名 -->
        <el-form-item prop="username">
          <el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
        </el-form-item>
        <!-- 密碼 -->
        <el-form-item prop="password">
          <el-input
            prefix-icon="iconfont icon-3702mima"
            v-model="loginForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <!-- 登錄 -->
        <el-form-item class="login_btn">
          <el-button type="primary" @click="login">登錄</el-button>
          <!-- 註冊 -->
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

界面的繪製主要使用element ui來繪製，這裏用到了表單組件，所以在element.js裏面需要導入組件

import { Form  } form 'element-ui'
import { FormItem } form 'element-ui'
import { Button  } form 'element-ui'

全局註冊到vue實例上面

Vue.use(Form)
Vue.use(FormItem)
Vue.use(Button)

表單的屬性

:model:綁定值
:rules:表單校驗規則
ref='' 表單的引用，通過this.$refs.引用名來獲取表單引用對象(實例對象)

重置表單

1:獲取到表單對象
2：調用重置表單的resetFields方法

登錄

1:在登錄的時候，先進行表單的預校驗
+. validate是對整個表單進行校驗的方法,參數爲一個回調函數，回調函數的第一個形參是一個布爾值，通過true
+. 校驗規則rules是對填寫的數據是否合法進行校驗，validatte是對錶單是否完成填寫
2: 校驗通過，調用接口，請求數據
3: 使用async await 來接收post請求後臺接口返回的數據。並且判斷其狀態是否是接口提供的正確狀態。如果是，將數據存儲變量中。不是彈框提示用戶，登錄失敗
4：將登錄之後token存儲在token，保存到客戶端的sessionStroge
+. token只有在當前打開的項目纔有效，所以選擇了sessionStroge中
5: 登錄成功，通過編程式導航，跳轉到home頁

出現一個問題：如果別人不在我這個網頁登錄，在地址欄隨便輸入一個字段和我接口字段相同，就可以隨意登錄了。 用到了vue中的路由守衛

router.beforeEach((to, from, next) => {
    if (to.path === '/login') next();
    // 從sessionStroge中獲取token值
    const tokenStr = window.sessionStorage.getItem("token");
    if (!tokenStr) return next('/login');
    next();
})

1:先調用路由鉤子函數，在裏面傳入一個參數，是一個function，function裏面傳入三個參數
(和promise有點相似)
2. 如果去的路徑是登錄頁面，放行
3. 如果不是登錄頁面跳轉到登錄頁面

退出

清除token，利用編程式導航，跳轉到登錄頁

詳細代碼在碼雲

需要素材或者程序出錯，歡迎交流

完整代碼