js实战系列之客服系统四：客服登录

系列包含

• js实战系列之客服系统一：项目介绍
• js实战系列之客服系统二：客户端搭建
• js实战系列之客服系统三：服务端搭建
• js实战系列之客服系统四：客服登录
• js实战系列之客服系统五：聊天

服务端添加客服账号配置

这里服务端后面创建的源码文件都放置创建的src目录下

1. 创建客服账号密码配置文件config.js

/* 配置两个客服账号 */
module.exports = [
    { account: "admin1", password: "123456", id: "1" },
    { account: "admin1", password: "123456", id: "2" },
]

2. 在index.js内添加挂载配置文件代码

/* 添加配置文件 */ 
fastify.decorate("config", require('./src/config'))

服务端添加数据存储

1. 创建存储文件storage.js (用于存储客服登录状态、分配的客户等数据)

/* 数据储存 */ 
module.exports = {
    loginStatus:[],
}

2. 在index.js内添加挂载数据存储文件

/* 添加数据存储文件 */ 
fastify.decorate("storage", require('./src/storage'))

服务端添加客服登录路由以及登录业务代码

1. 创建路由文件router.js

async function router(fastify) {
    /* 登录 */
    fastify.post("/login", async (req) => {
        try {
            let body = req.body
            let message = "账号密码有误"
            /* 账号密码校验 */ 
            if (!body.account) {
                throw new Error(message)
            }
            if (!body.password) {
                throw new Error(message)
            }
            let config = fastify.config
            let item = config.find(item => item.account === body.account)
            if (!item) {
                throw new Error(message)
            }
            if (body.password !== item.password) {
                throw new Error(message)
            }
            /* 存储登录状态 */ 
            if(fastify.storage.loginStatus.findIndex(items=>item.account === items.account) === -1){
                item.client = []
                fastify.storage.loginStatus.push(item)
            }
       
            return { code: 200, data:item.id }
        } catch (err) {
            return { code: 500, message: err.message }
        }
    })
}
module.exports = router

2. 在index.js内注册路由并添加公共前缀

/* 注册路由 */ 
fastify.register(require('./src/router'), { prefix: "/api" })

客户端login.vue页面添加登录业务代码

<template>
  <div id="login">
        <div class="login">
          <div class="loginMain">
            <el-form style="width: 100%">
              <el-form-item>
                <el-input
                  placeholder="请输入账号"
                  :prefix-icon="app.icon.User"
                  v-model="data.loginForm.account"
                  clearable
                >
                </el-input>
              </el-form-item>

              <el-form-item>
                <el-input
                  type="password"
                  placeholder="请输入密码"
                  :prefix-icon="app.icon.Lock"
                  v-model="data.loginForm.password"
                  show-password
                >
                </el-input>
              </el-form-item>

              <el-form-item id="loginBtn">
                <el-button type="primary" style="width: 100%" @click="login"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
  </div>
</template>

<script setup>
import { inject } from "vue";
const app = inject("app");
const data = app.reactive({
  loginForm: {
    account: "",
    password: "",
  },
});
/* login 登录 */
function login() {
  app.common.throttle(() => {
    app.api.login(data.loginForm).then(res=>{
        app.storage.setToken(res.data)
        app.router.replace("/")
    });
  });
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginMain {
  width: 300px;
  padding: 50px 50px;
  background: #fff;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, .1);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
</style>

• js实战系列之客服系统五：聊天