循序漸進VUE+Element 前端應用開發(12)--- 整合ABP框架的前端登錄處理

来源:https://www.cnblogs.com/wuhuacong/archive/2020/06/19/13158307.html
-Advertisement-
Play Games

VUE+Element 前端是一個純粹的前端處理,前面介紹了很多都是Vue+Element開發的基礎,從本章隨筆開始,就需要進入深水區了,需要結合ABP框架使用(如果不知道,請自行補習一下我的隨筆:ABP框架使用),ABP框架作為後端,是一個非常不錯的技術方向,但是前端再使用Asp.NET 進行開發... ...


VUE+Element 前端是一個純粹的前端處理,前面介紹了很多都是Vue+Element開發的基礎,從本章隨筆開始,就需要進入深水區了,需要結合ABP框架使用(如果不知道,請自行補習一下我的隨筆:ABP框架使用),ABP框架作為後端,是一個非常不錯的技術方向,但是前端再使用Asp.NET 進行開發的話,雖然會快捷一點,不過可能顯得有點累贅了,因此BS的前端選項採用Vue+Element來做管理(後續可能會視情況加入Vue+AntDesign),CS前端我已經完成了使用Winform+ABP的模式了。本篇隨筆主要介紹Vue+Element+ABP的整合方式,先從登錄開始介紹。

 1、ABP開發框架的回顧

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

啟動Host的項目,我們可以看到Swagger的管理界面如下所示。

我們登錄獲得用戶訪問令牌token後,測試字典類型或者字典數據的介面,才能返迴響應的數據。

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

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

對於通過Winform方式展示界面,以Web API方式和後端的ABP的Web API服務進行數據交互,是我們之前已經完成的項目,項目界面如下所示。

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

左側的功能樹列表和頂部的菜單模塊,可以根據角色擁有的許可權進行動態構建,不同的角色具有不同的菜單功能點,如下是測試用戶登錄後具有的界面。

 

2、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)
      })
    })
  },

Vue + Element前端項目的視圖、Store模塊、API模塊、Web API之間關係如下所示。

 

 登錄後我們獲取用戶身份信息,在控制臺中記錄返回對象信息,可以供參考,如下所示

  

有了token信息,我們就可以繼續其他介面的數據請求或者提交了,從而可以實現更多的管理功能了。

後續隨筆將基於ABP介面對接的基礎上進行更多界面功能的開發和整合。 

 

列出一下前面幾篇隨筆的連接,供參考:

循序漸進VUE+Element 前端應用開發(1)--- 開發環境的準備工作

循序漸進VUE+Element 前端應用開發(2)--- Vuex中的API、Store和View的使用

循序漸進VUE+Element 前端應用開發(3)--- 動態菜單和路由的關聯處理

循序漸進VUE+Element 前端應用開發(4)--- 獲取後端數據及產品信息頁面的處理

循序漸進VUE+Element 前端應用開發(5)--- 表格列表頁面的查詢,列表展示和欄位轉義處理

循序漸進VUE+Element 前端應用開發(6)--- 常規Element 界面組件的使用

循序漸進VUE+Element 前端應用開發(7)--- 介紹一些常規的JS處理函數

循序漸進VUE+Element 前端應用開發(8)--- 樹列表組件的使用

循序漸進VUE+Element 前端應用開發(9)--- 界面語言國際化的處理

循序漸進VUE+Element 前端應用開發(11)--- 圖標的維護和使用


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 需求:當按鍵盤enter鍵和鍵盤左右鍵時,左右切換頁面卡片並讀取卡片上的信息 一、獲取鍵盤對應的keycode keyCode 實際鍵值 48到57 0到9 65到90 a到z(A到Z) 112到135 F1到F24 8 BackSpace(退格) 9 Tab 13 Enter(回車) 20 Cap ...
  • 之前我曾寫過如何將canvas圖形轉換成圖片和下載canvas圖像的方法,這些都是在為這個插件做技術準備。 技術路線很清晰,將網頁的某個區域的內容生成圖像,保持到canvas里,然後將canvas內容轉換成圖片,保存到本地,最後上傳到微博。 我在網上搜尋到html2canvas這個能將指定網頁元素內 ...
  • # 從零開始的前端生活 --css層疊規則 層疊上下文 網頁上的元素其實是三維的,類似於高中學的左手坐標系,Z軸就是垂直於屏幕。層疊上下文跟“塊狀格式化上下文”(BFC)類似,只要元素擁有某些特定的css屬性,就會表現出層疊上下文的特點。 層疊順序 前提是重疊在一起,就會按照上圖的規則呈現。 層疊 ...
  • 初學編程的小伙伴經常會遇到的問題,1.沒資源 2.沒人帶 3.不知道從何開始 ,小編也是從新手期過來的,所以很能理解萌新的難處,現在整理一些以前自己學習的一些資料送給大家,希望對廣大初學小伙伴有幫助! 給你學習前端的新手幾個建議: 第一: 切記學習前端開發不可以依賴任何人,我做了開發這麼久,十年了, ...
  • JS中,調用Number()主要有兩種方式,一是作為一個 function 將任意類型的數據轉換成數值,二是作為一個類,通過new 生成一個數值對象。 其中第一種方式更常用。 用法一:function Number(value) 將一個任意類型的數據轉換成數值,無法轉換的則返回 NaN,轉換規則類似 ...
  • 面試:原型鏈 看圖記憶吧: 實例對象和原型對象之前通過__proto__傳遞屬性的關係,js引擎通過原型鏈可以逐層訪問找到原型,讀取原型對象中的屬性和方法,實現共用 原型鏈的基本原理:任何一個實例,通過原型鏈,找到它上面的原型,該原型對象中的方法和屬性,可以被所有的原型實例共用。 ...
  • 當文本域獲取焦點的時候,有的時候游標並不在最左側。 <textarea name="" cols="30" rows="10"></textarea> 其實也很簡單,將文本域寫成上面的形式即可,不要有換行、空格等任何數據。 原理是 textarea 標簽的空格、換行,也是數據的一部分,會在顯示在文本 ...
  • 每次滾動到元素時,都顯示載入動畫,如何添加? 元素添加初始參數 以上圖中的動畫為例,添加倆個左右容器,將內容放置在容器內部。 添加初始數據,預設透明度0、左右分別移動100px。 1 //左側容器 2 .item-leftContainer { 3 opacity: 0; 4 transform: ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...