Vue.js使用$.ajax和vue-resource實(shí)現(xiàn)OAuth的注冊(cè)、登錄、注銷和API調(diào)用

概述

上一篇我們介紹了如何使用vue resource處理HTTP請(qǐng)求，結(jié)合服務(wù)端的REST API，就能夠很容易地構(gòu)建一個(gè)增刪查改應(yīng)用。
這個(gè)應(yīng)用始終遺留了一個(gè)問(wèn)題，Web App在訪問(wèn)REST API時(shí)，沒(méi)有經(jīng)過(guò)任何認(rèn)證，這使得服務(wù)端的REST API是不安全的，只要有人知道api地址，就可以調(diào)用API對(duì)服務(wù)端的資源進(jìn)行修改和刪除。
今天我們就來(lái)探討一下如何結(jié)合Web API來(lái)限制資源的訪問(wèn)。

本文的主要內(nèi)容如下：

1. 介紹傳統(tǒng)的Web應(yīng)用和基于REST服務(wù)的Web應(yīng)用
2. 介紹OAuth認(rèn)證流程和密碼模式
3. 創(chuàng)建一個(gè)基于ASP.NET Identity的Web API應(yīng)用程序
4. 基于$.ajax實(shí)現(xiàn)OAuth的注冊(cè)、登錄、注銷和API調(diào)用
5. 基于vue-resource實(shí)現(xiàn)OAuth的注冊(cè)、登錄、注銷和API調(diào)用

本文的最終示例是結(jié)合上一篇的CURD，本文的登錄、注冊(cè)、注銷和API調(diào)用功能實(shí)現(xiàn)的。

本文9個(gè)示例的源碼已放到GitHub：https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth

OAuth介紹

傳統(tǒng)的Web應(yīng)用

在傳統(tǒng)的Web應(yīng)用程序中，前后端是放在一個(gè)站點(diǎn)下的，我們可以通過(guò)會(huì)話（Session）來(lái)保存用戶的信息。

例如：一個(gè)簡(jiǎn)單的ASP.NET MVC應(yīng)用程序，用戶登錄成功后，我們將用戶的ID記錄在Session中，假設(shè)為Session["UserID"]。
前端發(fā)送ajax請(qǐng)求時(shí)，如果這個(gè)請(qǐng)求要求已登錄的用戶才能訪問(wèn)，我們只需在后臺(tái)Controller中驗(yàn)證Session["UserID"]是否為空，就可以判斷用戶是否已經(jīng)登錄了。

這也是傳統(tǒng)的Web應(yīng)用能夠逃避HTTP面向無(wú)連接的方法。

基于REST服務(wù)的Web應(yīng)用

當(dāng)今很多應(yīng)用，客戶端和服務(wù)端是分離的，服務(wù)端是基于REST風(fēng)格構(gòu)建的一套Service，客戶端是第三方的Web應(yīng)用，客戶端通過(guò)跨域的ajax請(qǐng)求獲取REST服務(wù)的資源。

然而REST Service通常是被設(shè)計(jì)為無(wú)狀態(tài)的（Stateless），這意味著我們不能依賴于Session來(lái)保存用戶信息，也不能使用Session["UserID"]這種方式確定用戶身份。

解決這個(gè)問(wèn)題的方法是什么呢？常規(guī)的方法是使用OAuth 2.0。

對(duì)于用戶相關(guān)的OpenAPI，為了保護(hù)用戶數(shù)據(jù)的安全和隱私，第三方Web應(yīng)用訪問(wèn)用戶數(shù)據(jù)前都需要顯式的向用戶征求授權(quán)。
相比于OAuth 1.0，OAuth 2.0的認(rèn)證流程更加簡(jiǎn)單。

專用名詞介紹

在了解OAuth 2.0之前，我們先了解幾個(gè)名詞：

1. Resource：資源，和REST中的資源概念一致，有些資源是訪問(wèn)受保護(hù)的
2. Resource Server：存放資源的服務(wù)器
3. Resource Owner：資源所有者，本文中又稱為用戶(user)
4. User Agent：用戶代理，即瀏覽器
5. Client： 訪問(wèn)資源的客戶端，也就是應(yīng)用程序
6. Authorization Server：認(rèn)證服務(wù)器，用于給Client提供訪問(wèn)令牌的服務(wù)器
7. Access Token：訪問(wèn)資源的令牌，由Authorization Server器授予，Client訪問(wèn)Resource時(shí)，需提供Access Token
8. Bearer Token：Bearer Token是Access Token的一種，另一種是Mac Token。
9. Bearer Token的使用格式為：Bearer XXXXXXXX

Token的類型請(qǐng)參考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1

有時(shí)候認(rèn)證服務(wù)器和資源服務(wù)器可以是一臺(tái)服務(wù)器，本文中的Web API示例正是這種運(yùn)用場(chǎng)景。

OAuth認(rèn)證流程

在知道這幾個(gè)詞以后，我們用這幾個(gè)名詞來(lái)編個(gè)故事。

簡(jiǎn)化版本

這個(gè)故事的簡(jiǎn)化版本是：用戶(Resource Owner)訪問(wèn)資源(Resource)。

具體版本

簡(jiǎn)化版的故事只有一個(gè)結(jié)果，下面是這個(gè)故事的具體版本：

1. 用戶通過(guò)瀏覽器打開(kāi)客戶端后，客戶端要求用戶給予授權(quán)。
2. 客戶端可以直接將授權(quán)請(qǐng)求發(fā)給用戶（如圖所示），或者發(fā)送給一個(gè)中間媒介，比如認(rèn)證服務(wù)器。
3. 用戶同意給予客戶端授權(quán)，客戶端收到用戶的授權(quán)。
4. 授權(quán)模式(Grant Type)取決于客戶端使用的模式，以及認(rèn)證服務(wù)器所支持的模式。
5. 客戶端提供身份信息，然后向認(rèn)證服務(wù)器發(fā)送請(qǐng)求，申請(qǐng)?jiān)L問(wèn)令牌
6. 認(rèn)證服務(wù)器驗(yàn)證客戶端提供的身份信息，如果驗(yàn)證通過(guò)，則向客戶端發(fā)放令牌
7. 客戶端使用訪問(wèn)令牌，向資源服務(wù)器請(qǐng)求受保護(hù)的資源
8. 資源服務(wù)器驗(yàn)證訪問(wèn)令牌，如果有效，則向客戶端開(kāi)放資源
   

以上幾個(gè)步驟，(B)是較為關(guān)鍵的一個(gè)，即用戶怎么樣才能給客戶端授權(quán)。有了這個(gè)授權(quán)以后，客戶端就可以獲取令牌，進(jìn)而通過(guò)臨牌獲取資源。這也是OAuth 2.0的運(yùn)行流程，詳情請(qǐng)參考：https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-1.2

客戶端的授權(quán)模式

客戶端必須得到用戶的授權(quán)（authorization grant），才能獲得令牌（access token）。

OAuth 2.0定義了四種授權(quán)方式：

1. 授權(quán)碼模式（authorization code）
2. 簡(jiǎn)化模式（implicit）
3. 密碼模式（resource owner password credentials）
4. 客戶端模式（client credentials）

本文的示例是基于密碼模式的，我就只簡(jiǎn)單介紹這種模式，其他3我就不介紹了。

密碼模式

密碼模式（Resource Owner Password Credentials Grant）中，用戶向客戶端提供自己的用戶名和密碼?？蛻舳耸褂眠@些信息，向服務(wù)端申請(qǐng)授權(quán)。

在這種模式中，用戶必須把自己的密碼給客戶端，但是客戶端不得儲(chǔ)存密碼。這通常用在用戶對(duì)客戶端高度信任的情況下，比如客戶端是操作系統(tǒng)的一部分，或者由一個(gè)著名公司出品。

密碼嘛事的執(zhí)行步驟如下：

（A）用戶向客戶端提供用戶名和密碼。

（B）客戶端將用戶名和密碼發(fā)給認(rèn)證服務(wù)器，向后者請(qǐng)求令牌。

（C）認(rèn)證服務(wù)器確認(rèn)無(wú)誤后，向客戶端提供訪問(wèn)令牌。

(B)步驟中，客戶端發(fā)出的HTTP請(qǐng)求，包含以下參數(shù)：

1. grant_type：表示授權(quán)類型，此處的值固定為"password"，必選項(xiàng)。
2. username：表示用戶名，必選項(xiàng)。
3. password：表示用戶的密碼，必選項(xiàng)。
4. scope：表示權(quán)限范圍，可選項(xiàng)。

注意：在后面的客戶端示例中，除了提供username和password，grant_type也是必須指定為"password"，否則無(wú)法獲取服務(wù)端的授權(quán)。

服務(wù)端環(huán)境準(zhǔn)備

如果您是前端開(kāi)發(fā)人員，并且未接觸過(guò)ASP.Net Web API，可以跳過(guò)此段落。

Authentication選擇Individual User Accounts

創(chuàng)建這個(gè)Web API工程時(shí)，VS會(huì)自動(dòng)引入Owin和AspNet.Identity相關(guān)的庫(kù)。

修改ValuesController，除了IEnumerable<string> Get()操作外，其他操作都刪除，并為該操作應(yīng)用[Authorize]特性，這表示客戶端必須通過(guò)身份驗(yàn)證后才能調(diào)用該操作。

public class ValuesController : ApiController
{
  // GET: api/Values
  [Authorize]
  public IEnumerable<string> Get()
  {
    return new string[] { "value1", "value2" };
  }
}

添加Model, Controller

初始化數(shù)據(jù)庫(kù)

執(zhí)行以下3個(gè)命令

CustomersController類有5個(gè)Action，除了2個(gè)GET請(qǐng)求外，其他3個(gè)請(qǐng)求分別是POST, PUT和DELETE。
為這3個(gè)請(qǐng)求添加[Authorize]特性，這3個(gè)請(qǐng)求必須通過(guò)身份驗(yàn)證才能訪問(wèn)。

public class CustomersController : ApiController
{
  private ApplicationDbContext db = new ApplicationDbContext();

  // GET: api/Customers
  public IQueryable<Customer> GetCustomers()
  {
    return db.Customers;
  }

  // GET: api/Customers/5
  [ResponseType(typeof(Customer))]
  public async Task<IHttpActionResult> GetCustomer(int id)
  {
    Customer customer = await db.Customers.FindAsync(id);
    if (customer == null)
    {
      return NotFound();
    }

    return Ok(customer);
  }

  // PUT: api/Customers/5
  [Authorize]
  [ResponseType(typeof(void))]
  public async Task<IHttpActionResult> PutCustomer(int id, Customer customer)
  {
   // ...
  }

  // POST: api/Customers
  [Authorize]
  [ResponseType(typeof(Customer))]
  public async Task<IHttpActionResult> PostCustomer(Customer customer)
  {
    // ...
  }

  // DELETE: api/Customers/5
  [ResponseType(typeof(Customer))]
  [Authorize]
  public async Task<IHttpActionResult> DeleteCustomer(int id)
  {
   // ...
  }
}

讓W(xué)eb API以CamelCase輸出JSON

在Global.asax文件中添加以下幾行代碼：

var formatters = GlobalConfiguration.Configuration.Formatters;
var jsonFormatter = formatters.JsonFormatter;
var settings = jsonFormatter.SerializerSettings;
settings.Formatting = Formatting.Indented;
settings.ContractResolver = new CamelCasePropertyNamesContractResolver();

啟用CORS

在Nuget Package Manager Console輸入以下命令:

Install-Package Microsoft.AspNet.WebApi.Cors

在WebApiConfig中啟用CORS：

public static class WebApiConfig
{
  public static void Register(HttpConfiguration config)
  {
    var cors = new EnableCorsAttribute("*", "*", "*");
    config.EnableCors(cors);

    // ...

  }
}

類說(shuō)明

在執(zhí)行上述步驟時(shí)，VS已經(jīng)幫我們生成好了一些類

IdentityModels.cs：包含ApplicationDbContext類和ApplicationUser類，無(wú)需再創(chuàng)建DbContext類

public class ApplicationUser : IdentityUser
{
  // ...
}

public class ApplicationDbContext : IdentityDbContext<ApplicationUser>
{
  // ...
}

Startup.Auth.cs：用于配置OAuth的一些屬性。

public partial class Startup
{
  public static OAuthAuthorizationServerOptions OAuthOptions { get; private set; }

  public static string PublicClientId { get; private set; }

  // For more information on configuring authentication, please visit http://go.microsoft.com/fwlink/?LinkId=301864
  public void ConfigureAuth(IAppBuilder app)
  {
    // ..

    // Configure the application for OAuth based flow
    PublicClientId = "self";
    OAuthOptions = new OAuthAuthorizationServerOptions
    {
      TokenEndpointPath = new PathString("/Token"),
      Provider = new ApplicationOAuthProvider(PublicClientId),
      AuthorizeEndpointPath = new PathString("/api/Account/ExternalLogin"),
      AccessTokenExpireTimeSpan = TimeSpan.FromDays(14),
      // In production mode set AllowInsecureHttp = false
      AllowInsecureHttp = true
    };

    // Enable the application to use bearer tokens to authenticate users
    app.UseOAuthBearerTokens(OAuthOptions);

    // ..
  }
}

這些OAuth配置項(xiàng)，我們只用關(guān)注其中的兩項(xiàng)：

1. TokenEndpointPath：表示客戶端發(fā)送驗(yàn)證請(qǐng)求的地址，例如：Web API的站點(diǎn)為www.example.com，驗(yàn)證請(qǐng)求的地址則為www.example.com/token。
2. UseOAuthBearerTokens：使用Bearer類型的token_type（令牌類型）。

ApplicationOAuthProvider.cs：默認(rèn)的OAuthProvider實(shí)現(xiàn)，GrantResourceOwnerCredentials方法用于驗(yàn)證用戶身份信息，并返回access_token（訪問(wèn)令牌）。

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
  // ...   
}

通俗地講，客戶端輸入用戶名、密碼，點(diǎn)擊登錄后，會(huì)發(fā)起請(qǐng)求到www.example.com/token。

token這個(gè)請(qǐng)求在服務(wù)端執(zhí)行的驗(yàn)證方法是什么呢？正是GrantResourceOwnerCredentials方法。

客戶端發(fā)起驗(yàn)證請(qǐng)求時(shí)，必然是跨域的，token這個(gè)請(qǐng)求不屬于任何ApiController的Action，而在WebApiConfig.cs中啟用全局的CORS，只對(duì)ApiController有效，對(duì)token請(qǐng)求是不起作用的。
所以還需要在GrantResourceOwnerCredentials方法中添加一行代碼：

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
  context.Response.Headers.Add("Access-Control-Allow-Origin", new []{"*"});
  // ...
}

IdentityConfig.cs：配置用戶名和密碼的復(fù)雜度，主要用于用戶注冊(cè)時(shí)。例如：不允許用戶名為純字母和數(shù)字的組合，密碼長(zhǎng)度至少為6位…。

public static ApplicationUserManager Create(IdentityFactoryOptions<ApplicationUserManager> options, IOwinContext context)
{
  var manager = new ApplicationUserManager(new UserStore<ApplicationUser>(context.Get<ApplicationDbContext>()));
  // Configure validation logic for usernames
  manager.UserValidator = new UserValidator<ApplicationUser>(manager)
  {
    AllowOnlyAlphanumericUserNames = false,
    RequireUniqueEmail = true
  };
  // Configure validation logic for passwords
  manager.PasswordValidator = new PasswordValidator
  {
    RequiredLength = 6,
    RequireNonLetterOrDigit = true,
    RequireDigit = true,
    RequireLowercase = true,
    RequireUppercase = true,
  };
  // ...
  return manager;
}

使用Postman測(cè)試GET和POST請(qǐng)求

測(cè)試GET請(qǐng)求

GET請(qǐng)求測(cè)試成功，可以獲取到JSON數(shù)據(jù)。

測(cè)試POST請(qǐng)求

POST請(qǐng)求測(cè)試不通過(guò)，提示：驗(yàn)證不通過(guò)，請(qǐng)求被拒絕。

基于$.ajax實(shí)現(xiàn)注冊(cè)、登錄、注銷和API調(diào)用

服務(wù)端的環(huán)境已經(jīng)準(zhǔn)備好了，現(xiàn)在我們就逐個(gè)實(shí)現(xiàn)用戶注冊(cè)、登錄，以及API調(diào)用功能吧。

注冊(cè)

頁(yè)面的HTML代碼如下：

<div id="app">
  <div class="container">
    <span id="message">{{ msg }}</span>
  </div>
  <div class="container">
      <div class="form-group">
        <label>電子郵箱</label>
        <input type="text" v-model="registerModel.email" />
      </div>
      <div class="form-group">
        <label>密碼</label>
        <input type="text" v-model="registerModel.password" />
      </div>

      <div class="form-group">
        <label>確認(rèn)密碼</label>
        <input type="text" v-model="registerModel.confirmPassword" />
      </div>

      <div class="form-group">
        <label></label>
        <button @click="register">注冊(cè)</button>
      </div>
  </div>
</div>

創(chuàng)建Vue實(shí)例，然后基于$.ajax發(fā)送用戶注冊(cè)請(qǐng)求：

var demo = new Vue({
  el: '#app',
  data: {
    registerUrl: 'http://localhost:10648/api/Account/Register',
    registerModel: {
      email: '',
      password: '',
      confirmPassword: ''
    },
    msg: ''
  },
  methods: {
    register: function() {
      var vm = this
      vm.msg = ''
      
      $.ajax({
        url: vm.registerUrl,
        type: 'POST',
        dataType: 'json',
        data: vm.registerModel,
        success: function() {
          vm.msg = '注冊(cè)成功！'
        },
        error: vm.requestError
      })
    },
    requestError: function(xhr, errorType, error) {
      this.msg = xhr.responseText
    }
  }
})

登錄和注銷

登錄的HTML代碼：

<div id="app">
  <div class="container text-center">
    <span id="message">{{ msg }}</span>
  </div>
  <div class="container">
    <div class="account-info">
      <span v-if="userName">{{ userName }} | <a href="#" rel="external nofollow" @click="logout">注銷</a></span>
    </div>
  </div>
  <div class="container">
      <div class="form-group">
        <label>電子郵箱</label>
        <input type="text" v-model="loginModel.username" />
      </div>
      <div class="form-group">
        <label>密碼</label>
        <input type="text" v-model="loginModel.password" />
      </div>
      <div class="form-group">
        <label></label>
        <button @click="login">登錄</button>
      </div>
  </div>
</div>

創(chuàng)建Vue實(shí)例，然后基于$.ajax發(fā)送用戶登錄請(qǐng)求：

var demo = new Vue({
  el: '#app',
  data: {
    loginUrl: 'http://localhost:10648/token',
    logoutUrl: 'http://localhost:10648/api/Account/Logout',
    loginModel: {
      username: '',
      password: '',
      grant_type: 'password'
    },
    msg: '',
    userName: ''
  },

  ready: function() {
    this.userName = sessionStorage.getItem('userName')
  },
  methods: {
    login: function() {
      var vm = this
        vm.msg = ''
        vm.result = ''
      
      $.ajax({
        url: vm.loginUrl,
        type: 'POST',
        dataType: 'json',
        data: vm.loginModel,
        success: function(data) {
          vm.msg = '登錄成功！'
          vm.userName = data.userName
          sessionStorage.setItem('accessToken', data.access_token)
          sessionStorage.setItem('userName', vm.userName)
        },
        error: vm.requestError
      })
    },
    logout: function() {
      var vm = this
        vm.msg = ''

      $.ajax({
        url: vm.logoutUrl,
        type: 'POST',
        dataType: 'json',
        success: function(data) {
          
          vm.msg = '注銷成功！'
          vm.userName = ''
          vm.loginModel.userName = ''
          vm.loginModel.password = ''
          
          sessionStorage.removeItem('userName')
          sessionStorage.removeItem('accessToken')
        },
        error: vm.requestError
      })
    },
    requestError: function(xhr, errorType, error) {
      this.msg = xhr.responseText
    }
  }
})

在試驗(yàn)這個(gè)示例時(shí)，把Fiddler也打開(kāi)，我們一共進(jìn)行了3次操作：

1. 第1次操作：輸入了錯(cuò)誤的密碼，服務(wù)端響應(yīng)400的狀態(tài)碼，并提示了錯(cuò)誤信息。
2. 第2次操作：輸入了正確的用戶名和密碼，服務(wù)端響應(yīng)200的狀態(tài)碼
3. 第3次操作：點(diǎn)擊右上角的注銷鏈接

注意第2次操作，在Fiddler中查看服務(wù)端返回的內(nèi)容：

服務(wù)端返回了access_token, expires_in, token_type,userName等信息，在客戶端可以用sessionStorage或localStorage保存access_token。

調(diào)用API

取到了access_token后，我們就可以基于access_token去訪問(wèn)服務(wù)端受保護(hù)的資源了。

這里我們要訪問(wèn)的資源是/api/Values，它來(lái)源于ValuesController的Get操作。

基于注冊(cè)畫面，添加一段HTML代碼：

<div class="container text-center">
  <div>
    <button @click="callApi">調(diào)用API</button>
  </div>
  <div class="result">
    API調(diào)用結(jié)果：{{ result | json }}
  </div>
</div>

在Vue實(shí)例中添加一個(gè)callApi方法：

callApi: function() {
  var vm = this
    vm.msg = ''
    vm.result = ''
  
    headers = {}
    headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken');

  $.ajax({
    type: 'get',
    dataTye: 'json',
    url: vm.apiUrl,
    headers: headers,
    success: function(data) {
      vm.result = data
    },
    error: vm.requestError
  })
}

在調(diào)用callApi方法時(shí)，設(shè)置了請(qǐng)求頭的Authorization屬性，其格式為："Bearer access_token"。
由于服務(wù)端指定使用了Bearer類型的access token，所以客戶端必須使用這種格式將access token傳給資源服務(wù)器。

在試驗(yàn)這個(gè)示例時(shí)，我們一共進(jìn)行了5次操作：

1. 第1次操作：沒(méi)有輸入用戶名和密碼，直接點(diǎn)擊[調(diào)用API]按鈕，服務(wù)端返回401的狀態(tài)碼，表示該請(qǐng)求未授權(quán)。
2. 第2次操作：輸入用戶名和密碼，然后店點(diǎn)擊登錄按鈕，登錄成功。
3. 第3次操作：點(diǎn)擊[調(diào)用API]按鈕，服務(wù)端返回200的狀態(tài)碼，請(qǐng)求成功。
4. 第4次操作：點(diǎn)擊[注銷]鏈接，注銷成功。
5. 第5次操作：再次點(diǎn)擊[調(diào)用API]按鈕，服務(wù)端返回401的狀態(tài)碼，表示該請(qǐng)求未授權(quán)。

有人可能會(huì)注意到，為什么每次點(diǎn)擊[調(diào)用API]按鈕，都發(fā)起了兩次請(qǐng)求？

這是因?yàn)楫?dāng)瀏覽器發(fā)送跨域請(qǐng)求時(shí)，瀏覽器都會(huì)先發(fā)送一個(gè)OPTIONS預(yù)請(qǐng)求（preflight request）給目標(biāo)站點(diǎn)，用于確認(rèn)目標(biāo)站點(diǎn)是否接受跨域請(qǐng)求，如果目標(biāo)站點(diǎn)不支持跨域請(qǐng)求，瀏覽器會(huì)提示錯(cuò)誤：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果是POST請(qǐng)求，且數(shù)據(jù)類型(Content-Type)是application/x-www-form-urlencoded,multipart/form-data 或 text/plain中的一種，則瀏覽器不會(huì)發(fā)送預(yù)請(qǐng)求，上圖的/token請(qǐng)求就是滿足該條件的。

zepto會(huì)自動(dòng)將非GET請(qǐng)求的Content-Type設(shè)置為application/x-www-form-urlencoded：

if (settings.contentType || (settings.contentType !== false && settings.data && settings.type.toUpperCase() != 'GET'))
 setHeader('Content-Type', settings.contentType || 'application/x-www-form-urlencoded')
image

我們還是通過(guò)Fidder看一下第1次/api/Values請(qǐng)求和響應(yīng)的Headers信息

請(qǐng)求的Headers信息，它是一次OPTIONS請(qǐng)求。

響應(yīng)的Headers信息，Access-Control-Allow-Origin: *表示允許所有外部站點(diǎn)對(duì)目標(biāo)站點(diǎn)發(fā)送跨域請(qǐng)求。

更多CORS的知識(shí)，請(qǐng)參考MDN上的說(shuō)明：
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

基于vue-resource實(shí)現(xiàn)注冊(cè)、登錄和API調(diào)用

基于vue-resource實(shí)現(xiàn)這3項(xiàng)功能時(shí)，沿用上面的HTML代碼。

注冊(cè)

更為簡(jiǎn)潔的register方法：

register: function() {
  this.$http.post(this.registerUrl, this.registerModel)
    .then((response) => {
      this.msg = '注冊(cè)成功！'
    }).catch((response) => {
      this.msg = response.json()
    })
}

注意：當(dāng)使用vue-resource發(fā)送注冊(cè)的POST請(qǐng)求時(shí)，F(xiàn)iddler捕獲到了2次請(qǐng)求，第1次是由瀏覽器發(fā)送的OPTIONS預(yù)請(qǐng)求，第2次才是實(shí)際的POST請(qǐng)求。這和使用$.ajax時(shí)是不一樣的，因?yàn)?.ajax會(huì)將非GET請(qǐng)求的Content-Type設(shè)置為application/x-www-form-urlencoded，而vue-resource發(fā)送POST請(qǐng)求的Content-Type為application/json;charset=UTF-8。

啟用emulateJSON選項(xiàng)，可以讓瀏覽器不發(fā)送OPTIONS預(yù)請(qǐng)求，有兩種啟用方式。

1.全局啟用

Vue.http.options.emulateJSON = true

2.局部啟用

this.$http.post(this.registerUrl, this.registerModel ,{ emulateJSON : true})
  .then( (response) => {
    this.msg = '注冊(cè)成功！'
  })

啟用了emulateJSON選項(xiàng)后，使得POST請(qǐng)求的Content-Type變?yōu)閍pplication/x-www-form-urlencoded

登錄和注銷

登錄和注銷的方法：

login: function() {
  
  this.$http.post(this.loginUrl, this.loginModel)
    .then((response) => {
      var body = response.json()
      this.msg = '登錄成功！'
      this.userName = body.userName
      
      sessionStorage.setItem('accessToken', body.access_token)
      sessionStorage.setItem('userName', body.userName)
      
    }).catch(this.requestError)
},
logout: function() {
  
  this.$http.post(this.logoutUrl)
    .then((response) => {
      this.msg = '注銷成功！'
      this.userName = ''
      this.loginModel.username = ''
      this.loginModel.password = ''
      
      sessionStorage.removeItem('userName')
      sessionStorage.removeItem('accessToken')
      
    }).catch(this.requestError)
},
requestError: function(response) {
  this.msg = response.json()
}

API調(diào)用

調(diào)用API的方法也更為簡(jiǎn)潔：

callApi: function() {

  var headers = {}
  headers.Authorization = 'Bearer ' + sessionStorage.getItem('accessToken')

  this.$http.get(this.apiUrl, {
      headers: headers
    })
    .then((response) => {
      this.result = response.json()
    }).catch(this.requestError)
}

同樣的，在發(fā)送請(qǐng)求前，需要將access token添加到請(qǐng)求頭。

綜合示例

本文在準(zhǔn)備服務(wù)端環(huán)境的時(shí)候，提供了一個(gè)CustomersController，除了GET操作，其他操作的訪問(wèn)都是受保護(hù)的，需要用戶登錄以后才能操作。

現(xiàn)在我們來(lái)實(shí)現(xiàn)這個(gè)示例， 該示例結(jié)合了上一篇的CURD示例，以及本文的注冊(cè)、登錄、注銷功能。

具體代碼我就不再貼出來(lái)了，大家結(jié)合源代碼試一試吧。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。