【Vue.js】vue用户登录功能

之前用vue实现一个网站的登录功能，这里做一个记录和总结，以下是需要实现的登录业务描述：

1.输入用户名和密码，点击登录按钮，若两者匹配，即可进入首页，首页展示登录用户的信息；

2.当用户登录后，无法访问登录页；

3.用户未登录，无法访问需要登录才能展示的页面，此时需要跳转到登录页面，当登录成功后，直接跳转到刚才用户点击访问的页面。

一.基本的登录功能实现

首先简单介绍登录的逻辑，顺序图如下：

登录按钮绑定点击事件handleLogin，先要做前端验证，就是检查用户名和密码的规范性，可以按照需求具体问题具体分析，比如做正则判断，或者发送请求验证是否存在等，这里不详细实现了，仅判断用户是否输入，之后派发vuex，action为userLogin，login.vue的主要代码如下：

data(){
      return {
        phone:'',
        password:''
      }
    },
async handleLogin(){
  const {phone,password} = this;
  try {
     phone && password && await this.$store.dispatch('userLogin',{phone,password});
     let toPath = this.$route.query.redirect || 'home';
     this.$router.push(toPath);
  } catch (error) {
     alert(error.message);
  }
}

在userLogin里，调用封装好的reqLogin方法向后端接口发送登录请求，该请求的响应结果为两种类型，如果用户名和密码正确，返回token(验证用户信息的字符串)，若登录失败，返回失败的原因。

这里使用async和await修饰符处理异步请求，async修饰的方法userLogin会返回一个Promise实例，这里可以通过userLogin返回的Promise是成功或失败告知login.vue组件登录行为的结果。当登录成功时，