Vue+Vant+Koa2+MongoDB 实现用户登陆

Posted 2020-12-12 几行

前面的文章介绍了 Vue + Vant + koa2 + MongoDB 实现用户注册，今天我们来讲解一下用户登陆的实现。

 

主要实现：

1、前端通过 axios 向后端发送 username、password

2、后端检查用户名是否已注册、比对 password 是否正确。

3、后端生成 JWT 令牌返回给前端，前端存储于 localStorage 中。

其中，图形验证码部分将在下一节中讲解。

 

效果截图：

登陆成功，返回 code：200 msg : 登陆成功，并打印出 token

未注册用户返回：

密码错误返回：

 

JWT简介：

JWT 全称 JSON WEB TOKEN ,是目前最流行的跨域认证解决方案，假设用户登陆成功之后，首先访问 A 页面，然后访问 B 页面，而这两个页面的内容都需要根据用户的身份来获取，比如说 A 页面为用户的订单列表，需要根据 user_id 来查询该用户的所有订单，B 页面为用户的收货地址列表，又需要根据 user_id 字段来查询该用户的地址列表，而在不同页面之间，这个 user_id 是如何传递的呢，首先我们可以利用session ，服务端通过 cookie 将 session 发送给客户端，这种方式是将 session 存储于服务端，还有一种方式就是服务端通过 jwt 将 user_id、username 等信息生成加密的 token ，客户端接收之后将其存储于LocalStroage ，这样当用户访问 B 页面地址时，配置请求的 header 访问头，将 token 添加进请求头，服务端收到 token 进行解析，即可解析出 user_id、username 等信息，从而获取出 user_id ，从而 B 页面就会根据 user_id 获取到该用户的地址列表。

 

 另外，cookie 方式不支持跨域，JWT 支持跨域认证，例如单点登录就是依靠 JWT 实现。

 

一、前端部分

于.\\vue-mall-mobile\\mall\\src 新建 Login.vue，采用 Vant 的表单控件 ：

<template>
  <div id="login">
    <van-form>
      <van-field v-model="username" label="账号" />
      <van-field v-model="password" type="password" label="密码" />
      <van-button square block type="info" native-type="submit" size="normal" @click="Login"> 登陆 </van-button>
    </van-form>
  </div>
</template>

<script>
  import { Field } from \'vant\';
  import { Button } from \'vant\';
  import { Toast } from \'vant\';
  import { Form } from \'vant\';
  import ajax from \'@/api\';  

  export default {
    components:{
      [Field.name]: Field,
      [Button.name]: Button,
      [Toast.name]: Toast,
      [Form.name]: Form,
    },
    data() {
      return {
        username:\'\',
        password:\'\',
      }
    }
  }
</script>

 

mothods 中添加 Login() 方法：

async Login() {
  let { username, password} = this.$data;
  let res = await ajax.login(username, password);
  console.log(res)
}

 

在 src\\api\\index.js 中添加,通过 axios 将 username、password 发送到后端接口：

login(username = \'\', password = \'\') {
    return axios.post(\'localhost:3000/users/loginUser\',{username, password})
  }

 

二、后端部分：

在后端 routes\\users.js 中添加响应路由：

/**
 * 用户登陆
 */
router.post(\'/loginUser\', async function (ctx) {
  let {username, password} = ctx.request.body;
  
  if(!username || !password) return ctx.body = {code: 4020,msg: \'请填写完整的注册信息\'};
  
  let args = {username, password};
  const userData = await userService.accountLogin(args);
  
  ctx.body = (userData.code === 200) 
     ? {code: 200, msg: \'登陆成功\', token: jwt._createToken(userData)} 
     : userData
})

 

在 service\\userService 中添加处理登陆方法 accountLgoin({ username,  password }) :

async accountLogin({username, password}) {
    const userDoc = await UserModel.findOne({username});
    if(!userDoc) return {code: 0, msg: \'该用户尚未注册\'};
    
    let result = await userDoc.comparePassword(password, userDoc.password); // 进行密码比对是否一致
    return !result
      ? { code: -2, msg: \'密码不正确\' }
      : {
          code: 200,
          _id: userDoc._id,
          userName: userDoc.userName,
          gender: userDoc.gender,
          avatar: userDoc.avatar, 
          mobilePhone: userDoc.mobilePhone,
          email: userDoc.email,
          year: userDoc.year,
          month: userDoc.month, 
          day: userDoc.day
        };
  }

 这里的 userDoc.comparePassword() 方法，是我们在定义 UserModel 是添加的方法，bcryptjs 的 bcrypt.compare() 方法来实现对比我们在输入框中输入的秘密和保存在数据库里的 hash 处理后的密码。

 

生成 JWT 令牌，\\utils\\jwt.js 中的 _createToken() 方法：

const jwt = require(\'jsonwebtoken\');
/**
 * 创建 Token
 */
const _createToken = (userInfo) => {
  // JWT 格式 token | 有效时间 1 小时
  return jwt.sign({ userInfo }, secret, { expiresIn: \'1h\' });
};

 

这里的 { userInfo } 存储了用户的 id、username、性别等信息，以 token 令牌的方式存储于客户端，也就是前端，等到客户端发送请求时，在 header 请求头中，加入该 token，后端通过 jwt.virefy() 将 token 中存储的信息解析出来，解析方法如下，从而使后端代码可以通过解析出来的信息认定用户的身份。

const _verify = (token) => {
  return jwt.verify(token, secret, (error, decoded) => {
      console.log(decoded);
  });
};

 

三、前端储存 token

 

方法一：可以直接在 axios 返回时，用 localStorage.setItem() 将 token 写入，

localStorage.setItem(USER_TOKEN, JSON.stringify(userToken));

这样，我们下次想要访问该 token 时，直接：

JSON.parse(localStorage.getItem(USER_TOKEN))

 

不过我们应该熟悉 Vuex 状态管理，为后续开发中大型应用做准备，方法二：

 在 axios 返回时，调用 this.$store.commit()

(res.token)&&(this.$store.commit(\'setUserToken\', res.token));

 

setUserToken 位于 .\\src\\store\\index.js :

export default new Vuex.Store({
  state: {
    token: \'\',
  },
  mutations: {
    setUserToken(state, token) {
      alert(token);
      state.token = token;
    } 
  },
}

 

到这里，完整的登陆功能就实现啦。下一节我们会实现图片验证码。

 

如果文章中有错误之处，欢迎大家交流指正。