登录

1. 登录演示

登录

⬇️登录返回数据⬇️

{}

2. 实现方式

2.1. 前端实现

1. 判断开发环境 import.meta.env.DEV
2. 调用登录接口 fetch(`${baseUrl}/users/login`, { ... })
3. 保存 token localStorage.setItem("token", result.data.token)
4. 展示用户信息 resultLogin.value = result

vue-script

<script setup>
import { ref, reactive } from "vue";
const baseUrl = import.meta.env.DEV
  ? "http://localhost:13000"
  : "https://zichin.com/blogapi";

const params = reactive({
  username: "aaa",
  password: "123",
});

const resultLogin = ref({});

const doLogin = async () => {
  const result = await fetch(`${baseUrl}/users/login`, {
    method: "POST",
    body: JSON.stringify(params),
    headers: {
      "Content-Type": "application/json",
    },
  }).then((res) => res.json());
  localStorage.setItem("token", result.data.token);
  resultLogin.value = result;
};
</script>

vue-template

<template>
  <div class="loginform-container">
    <h3>登录</h3>
    <el-form :model="params" label-width="auto" style="max-width: 600px">
      <el-form-item label="username">
        <el-input v-model="params.username" />
      </el-form-item>
      <el-form-item label="password">
        <el-input v-model="params.password" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doLogin()">登录</el-button>
      </el-form-item>
    </el-form>
    <p>⬇️登录返回数据⬇️</p>
    <p>{{ resultLogin }}</p>
  </div>
</template>

vue-style

<style lang="scss">
.loginform-container {
  h3 {
    margin-bottom: 20px;
  }
}
</style>

2.2. 后端实现

1. 新增路由 router/users.js
2. 查询是否有该用户 SELECT * FROM users WHERE username = ?
3. 校验密码 if (item.password === password)
4. 生成 token const token = jwt.sign({ username, password }, mySecretKey)
5. 返回数据 resp.data.token = token

router/users.js

const Router = require("koa-router");
const db = require("./../utils/db");
const { mySecretKey } = require("./../utils/config");
const jwt = require("jsonwebtoken");
const router = new Router();

// 新增数据
router.post("/users/login", async (ctx) => {
  const { username, password } = ctx.request.body;
  const rows = await db.query("SELECT * FROM users WHERE username = ?", [
    username,
  ]);
  const resp = { data: {}, success: false, message: "" };
  if (rows.length) {
    const [item] = rows;
    if (item.password === password) {
      // 生成token, 过期时间2小时
      const token = jwt.sign({ username, password }, mySecretKey, {
        expiresIn: 60 * 60 * 2,
      });
      resp.success = true;
      resp.message = "登录成功";
      resp.data.token = token;
    } else {
      resp.message = "密码错误";
    }
  } else {
    resp.message = "用户不存在";
  }
  ctx.body = resp;
});

utils/db.js

const mysql = require("mysql");
const dbconfig = require("./config");
const pool = mysql.createPool(dbconfig);

function query(sql, values) {
  return new Promise((resolve, reject) => {
    pool.getConnection((err, connection) => {
      if (err) {
        reject(err);
      } else {
        connection.query(sql, values, (error, results) => {
          connection.release();
          if (error) {
            reject(error);
          } else {
            resolve(results);
          }
        });
      }
    });
  });
}

module.exports = {
  query,
};

utils/config.js

const dbconfig = {
  host: "82.156.xxx.xxx", // 数据库地址
  user: "db_name_xxx", // 数据库用户
  password: "db_password_xxx", // 数据库密码
  database: "my_blog", // 选中数据库
  charset: "utf8mb4",
};

const mySecretKey = "我的自定义秘钥";

package.json

{
  "name": "statistics",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "nodemon app.js",
    "git": "git add . && git commit -m \"update\" && git push"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jsonwebtoken": "^9.0.2",
    "koa": "^2.15.0",
    "koa-bodyparser": "^4.4.1",
    "koa-jwt": "^4.0.4",
    "koa-router": "^12.0.1",
    "koa2-cors": "^2.0.6",
    "mysql": "^2.18.1",
    "nodemon": "^3.0.3"
  }
}