一、在components 建立登入元件

二、樣式使用Sass，加上scoped表示只在當前頁面生效，不加則全域性生效

三、使用阿里巴巴向量圖示庫

四、表單預驗證

五、使用axios

六、儲存token

七、router導航守衛

八、後臺登出

九、程式碼提交

（1）建立路由重定向，建立登入元件，在路由中匯入並使用，並在App.vue根目錄中，使用路由佔位符

router index.js :
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/login/index'

Vue.use(VueRouter)

const routes 
 
= [
  // 路由重定向
  {
    path: '/',
    redirect: '/login'
  },
  // 登入元件
  {
    path: '/login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

App.vue : 使用路由佔位符
<template>
  <div id="app">
    <!--路由佔位符-->
    <router-view></router-view>
  </div>
</template>

（3）阿里巴巴示例圖示使用

1.選擇圖示收藏入庫,生成專案。2.下載至本地。3.拷貝font資料夾到assets資料夾中。4.在main.js中引入。5.使用font-class 引用

在main.js中引入

// 字型圖示
import '../src/assets/fonts/iconfont.css'

（4）表單預驗證：點選登入後，判斷valid引數是否為true，表示驗證是否通過。loginForm要與el-form中的ref匹配

 
this.$refs.loginForm.validate(valid => {
        console.log(valid)
})

（5）使用axios

/**
 * axios 配置
 * 設定請求根路徑
 * 掛載到vue
 * */
import axios from 'axios'
axios.defaults.baseURL = ''
Vue.prototype.$axios = axios

login.vue 驗證axios

const reset = this.$axios({
            method: 'post',
            url: 'http://timemeetyou.com:8889/api/private/v1/login',
            data:this.formData
          });
          console.log(reset)

列印返回是Promise，在箭頭函式前加async改為非同步，await簡化程式碼(await只能用在async中)

codingSubmit () {
  console.log(this)
  this.$refs.loginForm.validate(async valid => {
    if (!valid) {
      return
    }
    // 解構賦值：只需要返回的data
    const {data:res} = await this.$axios({
      method: 'post',
      url: 'http://192.168.31.61:8080/api/v1/admin/login',
      data:this.formData
    });
    console.log(res)
  })
}

before

after

（6）儲存token

// 一、登入成功後的token，儲存到客戶端的sessionStorage（臨時儲存）中
// 1.為什麼需要token：專案中的其他api介面除了登入，都必須在登入後驗證token再能訪問
// 2.為什麼要儲存到sessionStorage：localStorage用於持久化的本地儲存,sessionStorage用於本地儲存一個會話級別的資料
// 二、通過程式設計式導航調整到後臺主頁，主頁：/home(this.$router.push())

（7）路由導航守衛

// 路由導航守衛控制訪問許可權
// 如果使用者沒有登入，不準使用者通過URL直接訪問特定頁面，需要重新導航到登入頁
// 為路由物件，新增beforeEach 導航守衛
router.beforeEach((to,from,next)=>{
  // beforeEach接收一個回撥函式，包含三個形參
  // to : 將要訪問的頁面路徑
  // from : 從哪個頁面跳轉而來
  // next : 放行函式


  // 判斷to是否是“/login”（使用者訪問登入頁，放行）
  if(to.path === '/login') return next();

  // 從sessionStorage 中獲取儲存的token值
  // 如果沒有token，強制跳轉到登入頁
  const tokenStr = window.sessionStorage.getItem('accessToken')
  if(!tokenStr) return next('/login')
  // 有token，放行
  next()
})

（8）後臺登出

    logOut(){
      const _this = this
      this.$message({
        message: '後臺已登出',
        type: 'success',
        duration: 3000,
        // onClose 關閉時的回撥函式
        onClose(){
          // 清空token
          window.sessionStorage.clear();
          _this.$router.push('/login')
        }
      })
    }

（9）程式碼提交

git status 檢視程式碼狀態

git add . 提交程式碼到暫存區

git commit -m "登入功能完善" 提交程式碼到本地倉庫

git branch 檢視當前分支

git checkout master 切換到主分支

git merge login 合併登入分支

git push 推送到碼雲

其他：

git push -u origin login 推送指定分支到碼雲