请求用户登录接口的时候，请求成功，或者遇到问题的时候都可以在 UserLogin 组件里触发一个事件，通知一下它的父组件，父组件可以绑定这些事件然后做一些处理。

在成功请求了用户登录接口以后，用一下组件上的 $emit 触发一个自定义的事件，名字可以叫做 login-success ，把响应回来的数据，也就是这个 response.data 作为事件的数据。

发生异常的时候也可以用组件里的 $emit 触发一个事件，名字是 login-error，让 error 里的 response 作为事件数据。

回到 app 组件，找到这里用的这个 UserLogin 组件，可以绑定一下这个组件发生的自定义事件，绑定一下 login-success ，用 onLoginSuccess 处理这个事件。再绑定一下 login-error 事件，用 onLoginError 处理这个事件。

下面要在这个组件里面添加这两个方法，一个是 onLoginSuccess，方法接收一个 data 参数，这个参数的值就是在 UserLogin 组件里面触发 login-success 事件时候带的数据。

在方法里可以设置一下组件里的 token 这个数据的值，等于 data 里的 token。

下面再添加一个方法，名字是 onLoginError，方法接收一个 error 参数，它的值就是在 UserLogin 里面触发 login-error 事件的时候带的数据。

在方法里可以设置一下组件里的 errorMessage 这个数据，让它等于 error.data 里的 message。这个 error.data 的值就是服务端做出的响应里的数据。

在服务端的用户登录接口那里，如果处理用户登录的时候遇到了问题，接口会做出一个响应，这个响应里会带一个 message ，它的值是错误的具体原因。

在浏览器上测试一下，直接点击 登录，请求用户登录，发生了问题，这里会显示错误的原因。 输入一个用户名，再输入一个错误的密码，点击 登录， 这次会显示 密码不对，这里显示的这行文字是服务端的用户登录接口那里响应回来的。

再输入一个正确的密码，点击 登录。 登录成功以后会在控制台上输出服务端响应回来的数据。

是否登录

回到项目，在 app 组件里面，添加一个 computed 属性，里面可以定义组件需要的计算属性，这里可以添加一个 isLoggedIn，返回的值可以判断一下组件里的 token 这个数据，如果数据有值就返回 true，没值就返回 false。

我们可以使用这个 isLoggedIn 来表示用户当前的登录状态。

这个内容标题元素上，用一个 v-if 指令，条件是 isLoggedIn，这样这个元素只有在用户登录以后才会显示。这里可以给它添加一个 placeholder 属性，值设置成 请输入内容标题。

在这个 UserLogin 组件的上面，也可以再用一个 v-if，条件是 !isLoggedIn ，这样只有在用户没登录的时候才会显示这个 UserLogin 组件。

回到浏览器，先刷新一下页面。

输入要登录的用户的用户名，再输入用户的密码，点击登录。登录成功以后，会隐藏 UserLogin 组件，显示这个创建内容用的标题元素。

在这里输入一个内容的标题，按一下回车，会成功创建这个内容。 点击 删除按钮可以把这个内容删除掉。

现在刷新一下页面，用户的登录状态就不见了，需要重新再登录一下，后面我们会想办法让应用记住用户的登录状态。

这里再使用应用里的另一个用户登录一下，输入用户名，还有这个用户的密码，点击登录。

成功以后，再去创建一个新的内容，输入标题，按一下回车。刚才我们用的是张三这个用户登录的，所以新创建的这个内容的作者就是 张三。

点击 删除，可以把这个内容删除掉。