resource实现OAuth的注册、登录、注销和API调用(6)

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操作，其他操作的访问都是受保护的，需要用户登录以后才能操作。

现在我们来实现这个示例， 该示例结合了上一篇的CURD示例，以及本文的注册、登录、注销功能。

具体代码我就不再贴出来了，大家结合源代码试一试吧。