Vue3寫一個後臺管理系統（3）通用後臺登錄方案解析

在 `views` 中 `login` 文件夾，創建 `index.vue` 文件，書寫登錄界面，

都是一些基本的UI操作，我下邊直接粘貼出代碼，

<template>
  <div class="login-container">
    <el-form ref="loginFromRef" class="login-form" :model="loginForm" :rules="loginRules">
      <div class="title-container">
        <h3 class="title">後臺管理系統</h3>
      </div>

      <el-form-item prop="username">
        <span class="icon-container">
          <i class="el-icon-user"></i>
        </span>
        <el-input placeholder="請輸入用戶名" name="username" type="text" v-model="loginForm.username" />
      </el-form-item>

      <el-form-item prop="password">
        <span class="icon-container">
          <i class="el-icon-lock"></i>
        </span>
        <el-input placeholder="請輸入密碼" name="password" :type="passwordType" v-model="loginForm.password" />
        <span class="show-pwd">
          <svg-icon
            :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
            @click="onChangePwdType"
          />

        </span>
      </el-form-item>

      <el-form-item class="code-box">
       <span class="icon-container">

         <i class="el-icon-tickets"></i>

        </span>
        <el-input
          placeholder="圖形驗證碼"
          v-model="loginForm.captcha_code" class="code-input" maxlength="4">
        </el-input>
        <div class="code-img" @click="getCodeImg">{{loginForm.captcha_code}}</div>
      </el-form-item>


      <el-button type="primary" style="width: 100%; margin-bottom: 30px;" :loading="loading"
        @click="handleLogin">登錄</el-button>
    </el-form>
  </div>
</template>

<script setup>
import {} from 'vue'
</script>

<style lang="scss" scoped></style>

在 `router/index.js` 中增加以下路由配置

/**
 * 公開路由表
 */
const publicRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes: publicRoutes
})

其中的一些icon圖標用的是自己封裝的SvgIcon組件（包含element-plus 的圖標和自定義的 svg 圖標），我們這節主要講的是後臺系統整個登錄的方案實現，一些設計的簡單UI及其UI組件，相信只要有過 element-ui 使用經驗的同學，應該對這裏都不陌生，所以這裏就不對這塊內容進行過多贅述了，如果有想要代碼的小夥伴，下方留言，我可以私發你具體的代碼。

整個登錄界面的UI搭建完成後，效果就是這樣的

處理完了基本UI表單操作之後，接下來就是登錄操作的實現了。
對於登錄操作在後臺項目中是一個通用的解決方案，具體可以分爲以下幾點：

封裝 axios 模塊
封裝接口請求模塊
封裝登錄請求動作
保存服務端返回的 token
登錄鑑權

這些內容就共同的組成了一套 後臺登錄解決方案 。接下來，我們就分別來去處理介紹這些內容。

封裝 `axios` 模塊

在當前這個場景下，我們希望封裝出來的 axios 模塊，至少需要具備一種能力，那就是：根據當前模式的不同，設定不同的 BaseUrl ，因爲通常情況下企業級項目在 開發狀態 和 生產狀態 下它的 baseUrl 是不同的。

對於 @vue/cli 來說，它具備三種不同的模式：

development
test
production

根據我們前面所提到的 開發狀態和生產狀態 那麼此時我們的 axios 必須要滿足：在開發 || 生產狀態下，可以設定不同 BaseUrl 的能力

那麼想要解決這個問題，就必須要使用到 @vue/cli 所提供的環境變量來去進行實現。

我們可以在項目中創建兩個文件：

.env.development
.env.production

它們分別對應 開發狀態 和 生產狀態。

我們可以在上面兩個文件中分別寫入以下代碼：
.env.development：

# 標誌
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

.env.production：

# 標誌
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

有了這兩個文件之後，我們就可以創建對應的 axios 模塊

創建 utils/request.js ，寫入如下代碼：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

export default service

封裝請求動作

創建 api 文件夾，創建 sys.js：

import request from '@/utils/request'

/**
 * 登錄
 */
export const login = data => {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}

封裝登錄請求動作：

該動作我們期望把它封裝到 vuex 的 action 中

在 store 下創建 modules 文件夾，創建 user.js 模塊，用於處理所有和 用戶相關 的內容：

import { login } from '@/api/sys'
export default {
  namespaced: true,
  state: () => ({}),
  mutations: {},
  actions: {
    login(context, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: password  
        })
          .then(data => {
            resolve()
          })
          .catch(err => {
            reject(err)
          })
      })
    }
  }
}

在 store/index 中完成註冊：

import { createStore } from 'vuex'
import user from './modules/user.js'
export default createStore({
  modules: {
    user
  }
})

登錄觸發動作


<script setup>
import { ref, onMounted } from 'vue'
import { validatePassword } from './rules'
import { getCode } from '@/api/user'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'



onMounted(() => {
  getCodeImg()
})

//數據源
const loginForm = ref({
   username: 'test',
  password: '123456',
  captcha_code: '',
  code_key: ''
})
//驗證規則
const loginRules = ref({
  username: [
    {
      required: true,
      trigger: 'blur',
      message: '請輸入用戶名'
    },

  ],
  password: [
    {
      required: true,
      trigger: 'blur',
      validator: validatePassword()
    },

  ],
})

// 處理密碼框文本顯示狀態
const passwordType = ref('password')
const onChangePwdType = () => {
  if (passwordType.value === 'password') {
    passwordType.value = 'text'
  } else {
    passwordType.value = 'password'
  }
}

// 登錄動作處理
const loading = ref(false)
const loginFromRef = ref(null)
const store = useStore()
const router = useRouter()

/**
 * 登錄
 */
const handleLogin = () => {
  loginFromRef.value.validate(valid => {
    if (!valid) return
    loading.value = true
    store.dispatch('user/login', loginForm.value)
      .then(() => {
        loading.value = false
        // TODO: 登錄後操作
        router.push('/')

      })
      .catch(err => {
        getCodeImg()
        loading.value = false
      })

  })


}
/**
 * 獲取圖形驗證碼
 */
const getCodeImg = () => {
  getCode({})
    .then(data => {
      let obj = data.bizobj

      loginForm.value.code_key = obj.code_key
      loginForm.value.captcha_code = obj.code
    })
    .catch(err => {
    })
}
</script>

當然這時候你如果，去觸發登錄操作，可能會報錯，因爲我們還沒有設置代理
在 vue.config.js 中，加入以下代碼：

  devServer: {
    open: true,//啓動自動打開瀏覽器
    // 當地址中有/api的時候會觸發代理機制
    proxy: {
      '/': {
        target: '填寫你們自己公司的測試URL', //測試環境
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          // '^/api': '' //需要rewrite重寫的,
        }
      }
    }
  },

重新啓動服務，再次進行請求，就可以得到返回數據了

本地緩存處理方案

通常情況下，在獲取到 token 之後，我們會把 token 進行緩存，而緩存的方式將會分爲兩種：

本地緩存：LocalStorage
全局狀態管理：Vuex

保存在 LocalStorage 是爲了方便實現 自動登錄功能

保存在 vuex 中是爲了後面在其他位置進行使用

那麼下面我們就分別來實現對應的緩存方案：

LocalStorage：

創建 utils/storage.js 文件，封裝三個對應方法：

/**
 * 存儲數據
 */
export const setItem = (key, value) => {
  // 將數組、對象類型的數據轉化爲 JSON 字符串進行存儲
  if (typeof value === 'object') {
    value = JSON.stringify(value)
  }
  window.localStorage.setItem(key, value)
}

/**
 * 獲取數據
 */
export const getItem = key => {
  const data = window.localStorage.getItem(key)
  try {
    return JSON.parse(data)
  } catch (err) {
    return data
  }
}

/**
 * 刪除數據
 */
export const removeItem = key => {
  window.localStorage.removeItem(key)
}

/**
 * 刪除所有數據
 */
export const removeAllItem = key => {
  window.localStorage.clear()
}

在 vuex 的 user 模塊下，處理 token 的保存

import { login } from '@/api/sys'
import { setItem, getItem } from '@/utils/storage'
import { TOKEN } from '@/constant'
export default {
  namespaced: true,
  state: () => ({
    token: getItem(TOKEN) || ''
  }),
  mutations: {
    setToken(state, token) {
      state.token = token
      setItem(TOKEN, token)
    }
  },
  actions: {
    login(context, userInfo) {
      ...
          .then(data => {
            this.commit('user/setToken', data.data.data.token)
            resolve()
          })
          ...
      })
    }
  }
}

處理保存的過程中，需要創建 constant 常量目錄 constant/index.js
```
export const TOKEN = 'token'
```

此時，當點擊登陸時，即可把 token 保存至 vuex 與 localStorage 中

響應數據的統一處理

在 utils/request.js 中實現以下代碼：

import axios from 'axios'
import { ElMessage } from 'element-plus'

...
// 響應攔截器
service.interceptors.response.use(
response => {
 const { success, message, data } = response.data
 //   要根據success的成功與否決定下面的操作
 if (success) {
   return data
 } else {
   // 業務錯誤
   ElMessage.error(message) // 提示錯誤消息
   return Promise.reject(new Error(message))
 }
},
error => {
 ElMessage.error(error.message) // 提示錯誤信息
 return Promise.reject(error)
}
)

export default service

此時，對於 vuex 中的 user 模塊 就可以進行以下修改了：

this.commit('user/setToken', data.token)

登錄後操作

那麼截止到此時，我們距離登錄操作還差最後一個功能就是 登錄鑑權 。

只不過在進行 登錄鑑權 之前我們得先去創建一個登錄後的頁面，也就是我們所說的登錄後操作。

創建 layout/index.vue ，寫入以下代碼：

<template>
  <div class="">Layout 頁面</div>
</template>

<script setup>
import {} from 'vue'
</script>

<style lang="scss" scoped></style>

在 router/index 中，指定對應路由表：

const publicRoutes = [
 ...
  {
    path: '/',
    component: () => import('@/layout/index')
  }
]

在登錄成功後，完成跳轉
```
// 登錄後操作
router.push('/')
```
登錄鑑權解決方案

在處理了登陸後操作之後，接下來我們就來看一下最後的一個功能，也就是 登錄鑑權

首先我們先去對 登錄鑑權 進行一個定義，什麼是 登錄鑑權 呢？

當用戶未登陸時，不允許進入除 login 之外的其他頁面。

用戶登錄後，token 未過期之前，不允許進入 login 頁面

而想要實現這個功能，那麼最好的方式就是通過路由守衛來進行實現。

那麼明確好了 登錄鑑權 的概念之後，接下來就可以去實現一下

在 main.js 平級，創建 permission 文件

import router from './router'
import store from './store'

// 白名單
const whiteList = ['/login']
/**
* 路由前置守衛
*/
router.beforeEach(async (to, from, next) => {
// 存在 token ，進入主頁
// if (store.state.user.token) {
// 快捷訪問
if (store.getters.token) {
 if (to.path === '/login') {
   next('/')
 } else {
   next()
 }
} else {
 // 沒有token的情況下，可以進入白名單
 if (whiteList.indexOf(to.path) > -1) {
   next()
 } else {
   next('/login')
 }
}
})

在此處我們使用到了 vuex 中的 getters ，此時的 getters 被當作 快捷訪問 的形式進行訪問

所以我們需要聲明對應的模塊，創建 store/getters

const getters = {
token: state => state.user.token
}
export default getters

在 store/index 中進行導入：

import getters from './getters'
export default createStore({
getters,
})

那麼到這裏我們整個"通用後臺登錄方案解析"就算是全部講解完成了。
當然，裏面的一些代碼，例如網絡請求的解析，這些就需要你根據自己公司的接口自行去調整了，還有登錄鑑權的一些返回碼，都需要具體問題具體分析，我們這邊只是給出一個通用的方式，及其思路，但相信你看完整篇文章，這些也不是什麼大問題的。加油吧！

下一次，我們繼續介紹 “# 項目架構之搭建Layout架構解決方案與實現”，下面給個預告圖，下次再見吧

Vue3寫一個後臺管理系統（3）通用後臺登錄方案解析

在 `views` 中 `login` 文件夾，創建 `index.vue` 文件，書寫登錄界面，

在 `router/index.js` 中增加以下路由配置

整個登錄界面的UI搭建完成後，效果就是這樣的

封裝 `axios` 模塊

封裝請求動作

登錄觸發動作

本地緩存處理方案

響應數據的統一處理

登錄後操作

登錄鑑權解決方案

Vue3寫一個後臺管理系統（3）通用後臺登錄方案解析

Vue3寫一個後臺管理系統（1）開篇介紹

Vue3寫一個後臺管理系統（2）創建項目

Vue3寫一個後臺管理系統（4）RBAC權限受控體系的實現

vue3 Composition API setup函數的理解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Vue3寫一個後臺管理系統（3）通用後臺登錄方案解析

在 views 中 login 文件夾，創建 index.vue 文件，書寫登錄界面，

在 router/index.js 中增加以下路由配置

整個登錄界面的UI搭建完成後，效果就是這樣的

封裝 axios 模塊

封裝請求動作

登錄觸發動作

本地緩存處理方案

響應數據的統一處理

登錄後操作

登錄鑑權解決方案

在 `views` 中 `login` 文件夾，創建 `index.vue` 文件，書寫登錄界面，

在 `router/index.js` 中增加以下路由配置

封裝 `axios` 模塊