UI测试API报40壹无权力访问难点葡萄娱乐场

标题讲述:

概述

当我们用swagger UI对Web API 举行测试时报40一荒谬

上一篇大家介绍了什么利用vue resource管理HTTP请求,结合服务端的REST
API,就可见很轻巧地营造多个增加和删除查改应用。
本条利用始终遗留了贰个难题,Web App在走访REST
API时,未有通过其余注解,那使得服务端的REST
API是不安全的,只要有人掌握api地址,就足以调用API对服务端的财富开始展览改造和删除。
明日大家就来商量一下怎么着结合Web API来限制能源的拜会。

咱俩点开GET /api/services/app/Role/GetAll,输入参数

正文的重大内容如下:

 葡萄娱乐场 1

  1. 介绍守旧的Web应用和依据REST服务的Web应用
  2. 介绍OAuth认证流程和密码形式
  3. 开创1个基于ASP.NET Identity的Web API应用程序
  4. 基于$.ajax实现OAuth的注册、登录、注销和API调用
  5. 基于vue-resource实现OAuth的注册、登录、注销和API调用

点击Try it out!按钮,报401错误

本文的终极示例是整合上一篇的CU君越D,本文的报到、注册、注销和API调用功用实现的。

 葡萄娱乐场 2

葡萄娱乐场 3

 

正文九个示范的源码已放置GitHub:https://github.com/keepfool/vue-tutorials/tree/master/04.OAuth

缘由和消除方案

OAuth介绍

查看右上角有个革命惊讶号的Logo

传统的Web应用

 葡萄娱乐场 4

在价值观的Web应用程序中,前后端是坐落2个站点下的,大家得以经过对话(Session)来保存用户的音讯。

点击查阅原因是访问API须求输入授权token值进行表明,token值是后台遵照登入用户动态变化的,怎么着得到呢?

比如:三个简易的ASP.NET
MVC应用程序,用户登六成功后,大家将用户的ID记录在Session中,若是为Session[“UserID”]。
前者发送ajax请求时,要是那些请求供给已登入的用户技能访问,大家只需在后台Controller中验证Session[“UserID”]是或不是为空,就能够判别用户是还是不是早已报到了。

 葡萄娱乐场 5

那也是守旧的Web应用能够逃脱HTTP面向无连接的格局。

化解方案1:

基于REST服务的Web应用

有个从来得到授权token的API:/api/TokenAuth/Authenticate

今天广流年用,客户端和服务端是分手的,服务端是依赖REST风格构建的1套Service,客户端是第一方的Web应用,客户端通过跨域的ajax请求获取REST服务的财富。

葡萄娱乐场 6

但是REST
瑟维Stone常是被规划为无状态的(Stateless),那代表大家不能够依据于Session来保存用户音讯,也无法应用Session[“UserID”]那种方法分明用户地方。

输入用户名和密码就足以博得token

缓和那几个标题的不2法门是什么样吗?常规的方式是利用OAuth 二.0。

葡萄娱乐场 7

对此用户相关的OpenAPI,为了尊崇用户数量的辽阳和隐衷,第一方Web应用访问用户数量前都亟待显式的向用户征求授权。
相比于OAuth 1.0,OAuth 二.0的表明流程进一步简明。

收获结果,注意利用时后面加上 Bearer + 空格

专用名词介绍

葡萄娱乐场 8

在领悟OAuth 贰.0此前,大家先领悟多少个名词:

赶尽杀绝方案2:

  1. Resource:财富,和REST中的能源概念同样,有个别能源是造访受保险的
  2. Resource Server:存放财富的服务器
  3. Resource Owner:能源全部者,本文中又称之为用户(user)
  4. User Agent:用户代理,即浏览器
  5. Client: 访问财富的客户端,也等于应用程序
  6. Authorization Server:认证服务器,用于给Client提供访问令牌的服务器
  7. Access Token:访问财富的令牌,由Authorization
    Server器授予,Client访问Resource时,需提供Access Token
  8. Bearer Token:Bearer Token是Access Token的一种,另壹种是Mac Token。
  9. Bearer Token的选用格式为:Bearer XXXXXXXX

大家得以一向登六客户端查看访问API的token值就能够

Token的档期的顺序请参考:https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-7.1

自身以admin登入成功后,F12查看浏览器访问后台token值,在Network下随意点击3个呼吁数据到后台请求API的链接(注:小编用的是谷歌chrome 浏览器)

突发性认证服务器和能源服务器能够是壹台服务器,本文中的Web
API示例便是那种应用处境。

 葡萄娱乐场 9

葡萄娱乐场,OAuth认证流程

咱俩在上面包车型大巴Headers的Request
Headers里面包车型大巴Authorization查看到授权token音讯

在领略那一个词今后,大家用那多少个名词来编个好玩的事。

Bearer
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjIiLCJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1lIjoiYWRtaW4iLCJBc3BOZXQuSWRlbnRpdHkuU2VjdXJpdHlTdGFtcCI6IjY3NDhlNDQ2LTI4YWUtYWRjNi0zNmU2LTM5ZTIzMGFhNzA3MSIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6IkFkbWluIiwiaHR0cDovL3d3dy5hc3BuZXRib2lsZXJwbGF0ZS5jb20vaWRlbnRpdHkvY2xhaW1zL3RlbmFudElkIjoiMSIsInN1YiI6IjIiLCJqdGkiOiI0N2U0Y2YwNC05ODYyLTQ4MjItOTBhOC01Njk1NWUwYWE1M2UiLCJpYXQiOjE1MTE0NDU3MjUsIm5iZiI6MTUxMTQ0NTcyNSwiZXhwIjoxNTExNTMyMTI1LCJpc3MiOiJzYWFzIiwiYXVkIjoic2FhcyJ9.eXDes4LNkV4dkcFy-GTSF6kGDTK3a0blS3I6O7c2HuQ

简化版本

将以此授权音信copy到大家后台举办授权

以此传说的简化版本是:用户(Resource Owner)访问能源(Resource)。

 葡萄娱乐场 10

葡萄娱乐场 11

 

现实版本

再点开支取现金已授权成功

简化版的传说唯有叁个结果,上面是这一个旧事的切切实实版本:

 葡萄娱乐场 12

  1. 用户通过浏览器张开客户端后,客户端须求用户给予授权。
  2. 客户端能够一贯将授权请求发给用户(如图所示),或许发送给三当中级媒介,举个例子认证服务器。
  3. 用户同意给予客户端授权,客户端收到用户的授权。
  4. 授权方式(GrantType)取决于客户端接纳的形式,以及表明服务器所援助的格局。
  5. 客户端提供身份消息,然后向认证服务器发送请求,申请访问令牌
  6. 证实服务器验证客户端提供的地点音讯,要是证实通过,则向客户端发放令牌
  7. 客户端应用访问令牌,向财富服务器请求受保险的能源
  8. 能源服务器验证访问令牌,若是可行,则向客户端开放财富

下一场大家再拓展测试,Response
Code已重临200,测试通过。在后台打断点就能够调整

葡萄娱乐场 13

 葡萄娱乐场 14

以上几个步骤,(B)是较为重大的八个,即用户如何才干给客户端授权。有了那几个授权以后,客户端就足以赢得令牌,进而通过临牌获取能源。那也是OAuth
贰.0的运转流程,实际情况请参考:https://tools.ietf.org/html/draft-ietf-oauth-v2-15#section-1.2

 

客户端的授权格局

客户端必须取得用户的授权(authorization grant),本领博得令牌(access
token)。

OAuth 2.0定义了多种授权格局:

  1. 授权码形式(authorization code)
  2. 简化形式(implicit)
  3. 密码形式(resource owner password credentials)
  4. 客户端形式(client credentials)

本文的示范是基于密码格局的,作者就只简简单单介绍那种情势,别的三本身就不介绍了。

密码方式

密码情势(Resource Owner Password Credentials
格兰特)中,用户向客户端提供温馨的用户名和密码。客户端应用这么些音讯,向服务端申请授权。

在那种方式中,用户必须把自身的密码给客户端,不过客户端不可存款和储蓄密码。那平常用在用户对客户端中度信任的动静下,比方客户端是操作系统的壹部分,大概由二个有名集团出品。

葡萄娱乐场 15

密码嘛事的施行步骤如下:

(A)用户向客户端提供用户名和密码。

(B)客户端将用户名和密码发给认证服务器,向后者请求令牌。

(C)认证服务器确认正确后,向客户端提供访问令牌。

(B)步骤中,客户端发出的HTTP请求,包涵以下参数:

  1. grant_type:表示授权类型,此处的值固定为”password”,必选项。
  2. username:表示用户名,必选项。
  3. password:表示用户的密码,必选项。
  4. scope:表示权限限制,可选项。

专注:在前面包车型地铁客户端示例中,除了提供username和password,grant_type也是必须钦定为”password”,否则无法获取服务端的授权。

服务端碰着筹算

只要您是前端开荒职员,并且未接触过ASP.Net Web API,能够跳过此段子。

葡萄娱乐场 16

Authentication选择Individual User Accounts

葡萄娱乐场 17

创制那几个Web API工程时,VS会自行引进Owin和AspNet.Identity相关的库。

葡萄娱乐场 18

修改ValuesController,除了IEnumerable<string>
Get()操作外,其他操作都剔除,并为该操作使用[Authorize]特色,那意味客户端必须经过身份验证后才能调用该操作。

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

添加Model, Controller

葡萄娱乐场 19

葡萄娱乐场 20

葡萄娱乐场 21

开始化数据库

葡萄娱乐场 22

推行以下一个指令

葡萄娱乐场 23

葡萄娱乐场 24

CustomersController类有四个Action,除了三个GET请求外,其余三个请求分别是POST,
PUT和DELETE。
为那二个请求增加[Authorize]特征,那贰个请求必须透过身份验证才干访问。

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)
  {
   // ...
  }
}

让Web 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);

    // ...

  }
}

类说明

在举行上述手续时,VS已经帮我们转移好了1部分类

葡萄娱乐场 25

IdentityModels.cs:包括ApplicationDbContext类和ApplicationUser类,无需再创设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配置项,大家只用关爱个中的两项:

  1. TokenEndpointPath:表示客户端发送验证请求的地点,比如:Web
    API的站点为www.example.com,验证请求的地点则为www.example.com/token。
  2. UseOAuthBearerTokens:使用Bearer类型的token_type(令牌类型)。

ApplicationOAuthProvider.cs:暗中同意的OAuthProvider完成,格兰特ResourceOwnerCredentials方法用于注脚用户身份音讯,并赶回access_token(访问令牌)。

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

初始地讲,客户端输入用户名、密码,点击登陆后,会倡导呼吁到www.example.com/token。

token那么些请求在服务端推行的认证格局是什么样吗?正是格兰特ResourceOwnerCredentials方法。

客户端发起验证请求时,必然是跨域的,token这些请求不属于此外ApiController的Action,而在WebApiConfig.cs中启用全局的COSportageS,只对ApiController有效,对token请求是不起效率的。
为此还须求在格兰特ResourceOwnerCredentials方法中加多一行代码:

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

IdentityConfig.cs:配置用户名和密码的复杂度,首要用以用户注册时。比方:分化意用户名称叫纯字母和数字的整合,密码长度至少为五位…。

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测试GET和POST请求

测试GET请求

葡萄娱乐场 26

GET请求测试成功,能够赢得到JSON数据。

测试POST请求

葡萄娱乐场 27

POST请求测试不经过,提醒:验证不经过,请求被拒绝。

基于$.ajax实现登记、登6、注销和API调用

服务端的条件已经盘算好了,今后大家就每一个达成用户注册、登六,以及API调用成效吗。

注册

页面的HTML代码如下:

<div id="app">
  <div class="container">
    {{ msg }}
  </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>确认密码</label>
        <input type="text" v-model="registerModel.confirmPassword" />
      </div>

      <div class="form-group">
        <label></label>
        <button @click="register">注册</button>
      </div>
  </div>
</div>

创办Vue实例,然后依照$.ajax发送用户注册请求:

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 = '注册成功!'
        },
        error: vm.requestError
      })
    },
    requestError: function(xhr, errorType, error) {
      this.msg = xhr.responseText
    }
  }
})

葡萄娱乐场 28

报到和撤消

登录的HTML代码:

<div id="app">
  <div class="container text-center">
    {{ msg }}
  </div>
  <div class="container">
    <div class="account-info">
      {{ userName }} | <a href="#" rel="external nofollow" @click="logout">注销</a>
    </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>

创设Vue实例,然后依照$.ajax发送用户登入请求:

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
    }
  }
})

葡萄娱乐场 29

在考察这么些示例时,把Fiddler也开采,我们总共举办了1回操作:

  1. 第壹回操作:输入了错误的密码,服务端响应400的状态码,并提醒了错误消息。
  2. 第一次操作:输入了未可厚非的用户名和密码,服务端响应200的状态码
  3. 第二回操作:点击右上角的撤除链接

葡萄娱乐场 30

在意第一次操作,在Fiddler中查阅服务端重返的剧情:

葡萄娱乐场 31

服务端重返了access_token, expires_in,
token_type,userName等消息,在客户端能够用sessionStorage或localStorage保存access_token。

调用API

取到了access_token后,大家就能够基于access_token去访问服务端受保障的财富了。

此处大家要访问的能源是/api/Values,它来自ValuesController的Get操作。

听闻注册画面,增加一段HTML代码:

<div class="container text-center">
  <div>
    <button @click="callApi">调用API</button>
  </div>
  <div class="result">
    API调用结果:{{ result | json }}
  </div>
</div>

在Vue实例中增加三个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
  })
}

在调用callApi方法时,设置了请求头的Authorization属性,其格式为:”Bearer
access_token”。
由于服务端钦赐使用了Bearer类型的access
token,所以客户端必须运用那种格式将access token传给能源服务器。

葡萄娱乐场 32

在考试那几个示例时,大家总共进行了七回操作:

  1. 第三遍操作:未有输入用户名和密码,直接点击[调用API]开关,服务端重回40一的状态码,表示该请求未授权。
  2. 第二回操作:输入用户名和密码,然后店点击登入按键,登陆成功。
  3. 第3次操作:点击[调用API]按键,服务端再次来到200的状态码,请求成功。
  4. 第4次操作:点击[注销]链接,注销成功。
  5. 第四次操作:再一次点击[调用API]开关,服务端重临40壹的状态码,表示该请求未授权。

葡萄娱乐场 33

有人也许会小心到,为何老是点击[调用API]按键,都倡导了三次呼吁?

那是因为当浏览器发送跨域请求时,浏览器都会首发送二个OPTIONS预请求(preflight
request)给目的站点,用于确认目的站点是还是不是接受跨域请求,借使目的站点不补助跨域请求,浏览器会提醒错误:

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

要是是POST请求,且数据类型(Content-Type)是application/x-www-form-urlencoded,multipart/form-data

text/plain中的一种,则浏览器不会发送预请求,上海体育场合的/token请求就是满意该规则的。

zepto会自动将非GET请求的Content-Type设置为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

我们依然经过Fidder看一下第一次/api/Values请求和响应的Headers音讯

恳请的Headers新闻,它是1回OPTIONS请求。

葡萄娱乐场 34

响应的Headers信息,Access-Control-Allow-Origin:
*表示同意具备外部站点对目的站点发送跨域请求。

葡萄娱乐场 35

越来越多CO昂科拉S的文化,请参考MDN上的评释:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

基于vue-resource落成登记、登入和API调用

依据vue-resource完成那三项职能时,沿用上边的HTML代码。

注册

越来越精简的register方法:

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

留神:当使用vue-resource发送注册的POST请求时,Fiddler捕获到了一遍请求,第叁次是由浏览器发送的OPTIONS预请求,第一次才是事实上的POST请求。那和选择$.ajax时是不均等的,因为$.ajax会将非GET请求的Content-Type设置为application/x-www-form-urlencoded,而vue-resource发送POST请求的Content-Type为application/json;charset=UTF-八。

葡萄娱乐场 36

葡萄娱乐场 37

启用emulateJSON选项,能够让浏览器不发送OPTIONS预请求,有二种启用格局。

一.全局启用

Vue.http.options.emulateJSON = true

二.有的启用

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

启用了emulateJSON选项后,使得POST请求的Content-Type变为application/x-www-form-urlencoded

葡萄娱乐场 38

登入和收回

签到和撤除的艺术:

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调用

调用API的格局也愈发精简:

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)
}

同样的,在发送请求前,须求将access token增加到请求头。

总结示范

正文在备选服务端情况的时候,提供了二个CustomersController,除了GET操作,别的操作的造访都以受有限支持的,需求用户登6今后本领操作。

今昔大家来贯彻这一个示例,
该示例结合了上壹篇的CU君越D示例,以及本文的注册、登入、注销成效。

切实代码笔者就不再贴出来了,我们结合源代码试一试呢。

葡萄娱乐场 39

上述正是本文的全体内容,希望对咱们的上学抱有帮忙,也盼望大家多多帮忙脚本之家。

您恐怕感兴趣的篇章: