按部就班VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登陸處理

時間 2020-07-06

標籤按部就班 vue+element vue element 前端應用開發整合 abp 框架登陸處理简体版

原文原文鏈接

VUE+Element 前端是一個純粹的前端處理，前面介紹了不少都是Vue+Element開發的基礎，從本章隨筆開始，就須要進入深水區了，須要結合ABP框架使用（若是不知道，請自行補習一下個人隨筆：ABP框架使用），ABP框架做爲後端，是一個很是不錯的技術方向，可是前端再使用Asp.NET 進行開發的話，雖然會快捷一點，不過可能顯得有點累贅了，所以BS的前端選項採用Vue+Element來作管理（後續可能會視狀況加入Vue+AntDesign），CS前端我已經完成了使用Winform+ABP的模式了。本篇隨筆主要介紹Vue+Element+ABP的整合方式，先從登陸開始介紹。html

一、ABP開發框架的回顧

ABP是ASP.NET Boilerplate的簡稱，ABP是一個開源且文檔友好的應用程序框架。ABP不單單是一個框架，它還提供了一個最徍實踐的基於領域驅動設計(DDD)的體系結構模型。前端

啓動Host的項目，咱們能夠看到Swagger的管理界面以下所示。vue

咱們登陸得到用戶訪問令牌token後，測試字典類型或者字典數據的接口，才能返回響應的數據。後端

我根據ABP後端項目之間的關係，整理了一個架構的圖形。api

應用服務層是整個ABP框架的靈魂所在，對內協同倉儲對象實現數據的處理，對外配合Web.Core、Web.Host項目提供Web API的服務，而Web.Core、Web.Host項目幾乎不須要進行修改，所以應用服務層就是一個很是關鍵的部分，須要考慮對用戶登陸的驗證、接口權限的認證、以及對審計日誌的記錄處理，以及異常的跟蹤和傳遞，基本上應用服務層就是一個大內總管的角色，重要性不言而喻。cookie

對於經過Winform方式展現界面，以Web API方式和後端的ABP的Web API服務進行數據交互，是咱們以前已經完成的項目，項目界面以下所示。架構

主體框架界面採用的是基於菜單的動態生成，以及多文檔的界面佈局，具備很是好的美觀性和易用性。app

左側的功能樹列表和頂部的菜單模塊，能夠根據角色擁有的權限進行動態構建，不一樣的角色具備不一樣的菜單功能點，以下是測試用戶登陸後具備的界面。框架

二、Vue+Element整合ABP框架的前端登陸處理

以前咱們開發完成的Vue+Element的前端項目，默認已經具備登陸系統的功能，不過登陸是採用mock方式進行驗證並處理的，本篇隨筆介紹是基於實際的ABP項目進行用戶身份的登陸處理，這個也是開發其餘接口展現數據的開始步驟，必須經過真實的用戶身份登陸後臺，得到對應的token令牌，才能進行下一步接口的開發工做。函數

例如對應登陸界面上，界面效果以下所示。

在用戶登陸界面中，咱們處理用戶登陸邏輯代碼以下所示。

    // 處理登陸事件
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

這裏主要就是調用Store模塊裏面的用戶Action處理操做。

例如對於用戶store模塊裏面的登陸Action函數以下所示。

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { result } = response // 獲取返回對象的 result
 var token = result.accessToken var userId = result.userId // 記錄令牌和用戶Id
        commit('SET_TOKEN', token)
        commit('SET_USERID', userId)

        // 存儲cookie
        setToken(token)
        setUserId(userId)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

而其中 login({ username: username.trim(), password: password }) 操做，是經過API封裝處理的調用，使用前在Store模塊中先引入API模塊，以下所示。

import { login, logout, getInfo } from '@/api/user'

而其中 API模塊代碼以下所示。

export function login(data) {
  return request({
    url: '/abp/TokenAuth/Authenticate',
    method: 'post',
    data: {
      UsernameOrEmailAddress: data.username,
      password: data.password
    }
  })
}

這裏咱們用了一個/abp的前綴，用來給WebProxy的處理，實現地址的轉義，從而能夠實現跨站的處理，讓前端調用外部地址就和調用本地地址同樣，無縫對接。

咱們來看看vue.config.js裏面對於這個代理的轉義操做代碼。

而 http://localhost:21021/api 地址指向的項目，是咱們本地使用ABP開發的一個後端Web API項目，咱們能夠經過地址 http://localhost:21021/swagger/index.html 進行接口的查看。

咱們打開獲取受權令牌的Authenticate接口，查看它的接口定義內容

經過標註的1,2，咱們能夠看到這個接口的輸入參數和輸出JSON信息，從而爲咱們封裝Web API的調用提供很好的參考。

ABP框架統一返回的結果是result，這個result裏面纔是返回對應的接口內容，如上面的輸出JSON信息裏面的定義。

因此在登錄返回結果後，咱們要返回它的result對象，而後在進行數據的處理。

const { result } = response // 獲取返回對象的 result

而後經過result來訪問其餘屬性便可。

var token = result.accessToken // 用戶令牌
var userId = result.userId // 用戶id

用戶登陸成功後，並獲取到對應的數據，咱們就能夠把必要的數據，如token和userid存儲在State和Cookie裏面了。

// 修改State對象，記錄令牌和用戶Id
commit('SET_TOKEN', token)
commit('SET_USERID', userId)

// 存儲cookie
setToken(token)
setUserId(userId)

有了這些信息，咱們就能夠進一步獲取用戶的相關信息，如用戶名稱、介紹，包含角色列表和權限列表等內容了。

例如對應用戶信息獲取接口的ABP後端地址是 http://localhost:21021//api/services/app/User/Get

那麼咱們前端就須要在API模塊裏面構建它的訪問地址（/abp/services/app/User/Get）和接口處理了。

export function getInfo(id) {
  return request({
    url: '/abp/services/app/User/Get',
    method: 'get',
    params: {
      id
    }
  })
}

如上所示，在Store模塊裏引入API模塊，以下所示。

import { login, logout, getInfo } from '@/api/user'

而後在Store模塊中封裝一個Action用來處理用戶信息的獲取的。

  // 獲取用戶信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.userid).then(response => {
        const { result } = response
        console.log(result) // 輸出測試

        if (!result) {
          reject('Verification failed, please Login again.')
        }

        const { roles, roleNames, name, fullName } = result

        // 角色非空提醒處理
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', { roles, roleNames })
        commit('SET_NAME', name)
        // commit('SET_AVATAR', avatar) //能夠動態設置頭像
        commit('SET_INTRODUCTION', fullName)
        resolve(result)
      }).catch(error => {
        reject(error)
      })
    })
  },