为了安全,我们向服务发送的需要验证用户身份的请求,都需要先去向服务请求一个 CSRF Token ... 它其实就是一串随机的字符串,然后使用这个 token 去发送想要的请求。比如获取当前登录的用户的信息,用户登录等等...
想要去请求 CSRF Token ,我们得先去勾选一下服务资源 ... 打开 结构,服务,编辑一下 myservice ... 打开 user 区域 ... 勾选一下 token ... 它的功能就是可以返回 CSRF Token 。
保存 ... 回到之前编辑的代码 ...
代码
这里我们可以再用一个 ajax 方法去发送一个请求,请求的地址就是刚才启用的 user/token ... 类型是 POST ... 要求返回的数据的类型是 json ... 发生错误去执行 onError ... 请求成功的话,在控制台上输出返回来的结果... 保存一下 ...
$.ajax({
url: 'http://127.0.0.1/drupal/myservice/user/token',
type: 'POST',
dataType: 'json',
error: onError,
success: function (CSRFToken) {
console.log(CSRFToken);
}
});
预览
回到浏览器 ... 刷新 ... 这里会显示一个对象 ... 这个对象有一个 token 属性,这个属性的值就是请求的 CSRF Token ... 我们要做的就是使用这个 token 去发送其它的请求,比如要求返回当前登录用户的请求。
代码
再回到 index.js ... 把在上一个视频里设置的 ajax 请求,放在这个token 请求的里面。 在这个获取当前登录用户的请求里面,我们得去设置一下请求的一个 header ,也就是头部信息。
可以给这个请求添加一个 beforeSend 属性 ... 属性的值是一个匿名函数 ... 把请求的这个对象交给这个函数 ...
再用这个对象的 setRequestHeader 方法去设置一下请求的头部 .. 这里我们需要去设置一下 X-CSRF-Token 这个头部信息 ... 它的值,就是请求 user/token 返回来的那个 token ...
这个 token 的具体的值是在返回来的对象的 token 属性里面 ... 返回来的对象命名成了 CSRFToken ... 用一个 CSRFToken.token 可以访问到这个 token 属性的值 ...
/**
* 获取到当前登录的用户信息
*/
$.ajax({
url: 'http://127.0.0.1/drupal/myservice/user/token',
type: 'POST',
dataType: 'json',
error: onError,
success: function (CSRFToken) {
$.ajax({
url: 'http://127.0.0.1/drupal/myservice/system/connect',
type: 'POST',
dataType: 'json',
error: onError,
beforeSend: function (request) {
request.setRequestHeader('X-CSRF-Token', CSRFToken.token);
},
success: function (data) {
console.log(data);
}
});
}
});
其实这里我们做的就是先去请求一个 token ,然后把这个 token 作为请求当前登录用户的一个头部信息发送给服务。这样才能验证成功。保存一下 ...
回到浏览器再去看一下 ...
在控制台上,你会发现,不会再显示那个 CSRFToken 验证失败这个错误了 ... 给我们返回来的是一个当前登录的用户的对象 ...
在这个对象里,包含当前登录的用户的相关的信息。
里面有用户的名字,邮件地址,用户的角色,创建的日期,上次登录的时间等等 ...