前言
經歷了專案初始化，本篇主要介紹 專案初始化之后路由的配置，以及前幾個組件的配置，可以把一個組件理解為一個頁面，每個頁面就是一個組件，
Login組件
首先，我們需要在router.js中引入我們創建好的Login.vue組件，
通過實體化router物件，以及router的hash模式完成配置
當用戶訪問'/login'時，向用戶展示 我們寫好的Login組件，并且添加路由的重定向，來設定，如果用戶訪問了'/'時，我們也讓用戶跳轉到'/login' 中
接下來進入到Login組件的配置
<template>
<div class="login_container">
<div class="login_box">
<!-- 頭像區 -->
<div class="avatar_box">
<img src="../assets/logo.png">
</div>
<!-- 登錄表單區 -->
<el-form ref='loginFormRef' :model="loginForm" :rules="loginRules" label-width="0px" class="login_form">
<!-- 用戶名 -->
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user" type="text"></el-input>
</el-form-item>
<!-- 密碼 -->
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
</el-form-item>
<!-- 按鈕 -->
<el-form-item class="btns">
<el-button type="primary" @click="login('loginFormRef')">登錄</el-button>
<el-button type="info" @click.enter="resetForm('loginFormRef')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>Login作為我們所配置的子組件，需要在內容首位放入一對template標簽，此外，在template中，我們需要唯一的一個根節點進行包裹，
表單登錄區域 我們在el-form設定了v-model=‘loginForm’ 用來系結 整個表單用到的資料，在input中可以通過，v-model=‘loginForm.name'的方式 來進行資料的雙向系結
el-form 中 :rules='loginRules' 用來系結表單的驗證規則
在el-form-item中我們只需要通過prop屬性系結驗證規則即可
驗證效果如圖，
再往下是登錄和重置按鈕，通過@click來系結點擊事件
重置的點擊事件
這里的this指向的是我們vue的實體物件，$refs是 element-ui 幫我們掛在到實體物件上的，
翻看element-ui提供的檔案
由此可以得知，resetField可以幫我們移除表單里的資料，以及驗證結果
登錄按鈕
眼下我們需要講用戶所填寫的用戶名密碼，提交到服務器進行驗證，但是在這之前，我們需要先讓用戶通過表單的驗證，減少沒必要的請求，減小服務器端的壓力，
validete就是用來幫助我們進行表單的預校驗的，它回傳一個boolean 如果校驗成功回傳true，如果失敗回傳false 因此我們這里需要 呼叫if (!valid) 如果valid 為false 就讓函式return出去，
校驗成功我們就可以向服務器發起請求了
查看介面檔案
發起請求成功以后發現服務器回傳了一個promise物件
因此我們需要es7 為我們提供的async/await 方法 來簡化 我們的異步請求操作
此外利用解構賦值 接收服務器回傳的引數
我們log看一下
回傳了一個物件，以及服務器回傳的資料
通過res.meta.status判斷請求是否成功，如果失敗，就通過this.$message提示用戶，登錄失敗，
請求成功通過window.sessionStorage.setItem('token', res.data.token)保存 服務器回傳 回來的token值，并且通過$router.push讓頁面跳轉到我們所需要的頁面即組件上，
為什么需要保存token呢 因為它是一種身份認證的機制，接下來將用于我們的路由守衛，以及后續相關請求中，
我們F12看看我們的sessionstorage
token以及被保存下來了
登錄成功以后自動跳轉到后臺管理頁面
全域路由守衛
在我們的router檔案中，我們需要添加一個路由守衛，保護我們的用戶資訊，
根據以上代碼，我們逐行分析
如果用戶訪問的是'/login' 此頁面 我們不需要用戶提供token 因為token是在頁面登錄成功以后，服務器才會發放的，
接下來通過window.sessionStorage.getItem('token') 獲取剛剛我們用window.sessionStorage.setItem所保存下來的鍵名為token的值，并且用tokenStr接受
如果tokenStr為空，強制回傳'/login'組件，如果存在，放行，
最后我們需要通過export 將router 暴露出去供其他組件使用，
補充
我們每次發起請求，訪問的url都應該帶根目錄，但是每次都填根目錄，顯得很繁瑣，因此我們用上了一個axios為我們提供的方法，設定我們的根目錄
在接下來的組件中，我們發起請求是，都應該添加我們的請求頭，我們在此也配置一下，
通過axios提供的請求攔截器，在我們每次發起請求時，過濾一下我們的資料，為我們的請求添加請求頭，請求頭則是剛付訓取到服務器頒發給我們的token 此外 攔截器 我們必須要用return 回傳值
總結
考慮到家人們可能需要復制代碼段，但是我又喜歡截圖，我把gitee鏈接發布給大佬們瀏覽
weiyuyang/vue-shop
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/356999.html
標籤：其他
下一篇：vuex基礎方法總結