Vue.js使用$.ajax和vue | vue ajax mvc
概述上一篇我們介紹瞭如何使用vueresource處理HTTP請求,結合服務端的RESTAPI,就能夠很容易地構建一個增刪查改應用。這個應用始終遺留了一個問題,WebApp在訪問RESTAPI時,沒有經過任何認證,這使得服務端的RESTAPI是不安全的,只要有人知道api地址,就可以呼叫API對服務端的資源進行修改和刪除。今天我們就來探討一下如何結合WebAPI來限制資源的訪問。本文的主要內容如下:介紹傳統的Web應用和基於REST服務的Web應用介紹OAuth認證流程和密碼模式建立一個基於ASP.NETIdentity的WebAPI應用程式基於$.ajax實現OAuth的註冊、登入、登出...
概述
上一篇我們介紹瞭如何使用vue resource處理HTTP請求,結合服務端的REST API,就能夠很容易地構建一個增刪查改應用。這個應用始終遺留了一個問題,Web App在訪問REST API時,沒有經過任何認證,這使得服務端的REST API是不安全的,只要有人知道api地址,就可以呼叫API對服務端的資源進行修改和刪除。今天我們就來探討一下如何結合Web API來限制資源的訪問。
本文的主要內容如下:
介紹傳統的Web應用和基於REST服務的Web應用介紹OAuth認證流程和密碼模式建立一個基於ASP.NET Identity的Web API應用程式基於$.ajax實現OAuth的註冊、登入、登出和API呼叫基於vue-resource實現OAuth的註冊、登入、登出和API呼叫
本文的最終示例是結合上一篇的CURD,本文的登入、註冊、登出和API呼叫功能實現的。
本文9個示例的原始碼已放到GitHub:https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth[1]
OAuth介紹
傳統的Web應用
在傳統的Web應用程式中,前後端是放在一個站點下的,我們可以通過會話(Session)來儲存使用者的資訊。
例如:一個簡單的ASP.NET MVC應用程式,使用者登入成功後,我們將使用者的ID記錄在Session中,假設為Session[“UserID”]。前端傳送ajax請求時,如果這個請求要求已登入的使用者才能訪問,我們只需在後臺Controller中驗證Session[“UserID”]是否為空,就可以判斷使用者是否已經登入了。
這也是傳統的Web應用能夠逃避HTTP面向無連線的方法。
基於REST服務的Web應用
當今很多應用,客戶端和服務端是分離的,服務端是基於REST風格構建的一套Service,客戶端是第三方的Web應用,客戶端通過跨域的ajax請求獲取REST服務的資源。
然而REST Service通常是被設計為無狀態的(Stateless),這意味著我們不能依賴於Session來儲存使用者資訊,也不能使用Se...