<div> <div> <span>{{ msg }}</span> </div> <div> <div> <label>电子邮箱</label> <input type="text" v-model="registerModel.email" /> </div> <div> <label>密码</label> <input type="text" v-model="registerModel.password" /> </div> <div> <label>确认密码</label> <input type="text" v-model="registerModel.confirmPassword" /> </div> <div> <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 } } })
登录和注销
登录的HTML代码：
<div> <div> <span>{{ msg }}</span> </div> <div> <div> <span v-if="userName">{{ userName }} | <a href="#" @click="logout">注销</a></span> </div> </div> <div> <div> <label>电子邮箱</label> <input type="text" v-model="loginModel.username" /> </div> <div> <label>密码</label> <input type="text" v-model="loginModel.password" /> </div> <div> <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 } } })
在试验这个示例时，把Fiddler也打开，我们一共进行了3次操作：
第1次操作：输入了错误的密码，服务端响应400的状态码，并提示了错误信息。
第2次操作：输入了正确的用户名和密码，服务端响应200的状态码
第3次操作：点击右上角的注销链接
注意第2次操作，在Fiddler中查看服务端返回的内容：
服务端返回了access_token, expires_in, token_type,userName等信息，在客户端可以用sessionStorage或localStorage保存access_token。
调用API
取到了access_token后，我们就可以基于access_token去访问服务端受保护的资源了。
这里我们要访问的资源是/api/Values，它来源于ValuesController的Get操作。
基于注册画面，添加一段HTML代码：
<div> <div> <button @click="callApi">调用API</button> </div> <div> API调用结果：{{ result | json }} </div> </div>
在Vue实例中添加一个callApi方法：