使用jwt生成token

app.post('/api/login', async (req, res) => {
    const user = await User.findOne({
        email: req.body.email
    })
    if (!user) {
        return res.status(422).send({
            mes: '用户名不存在'
        })
    }
    const isPassword = require('bcrypt').compareSync(   //比较
        req.body.password,   //文明
        user.password    //密文
    )
    if (!isPassword) {
        return res.status(422).send({
            msg: "密码无效"
        })
    }
    //生成token     
    //已经不用session了关了它游览器就没有了  用jwt可以设置保存时间，维持无状态连接

    const token = jwt.sign({
        id: String(user._id),
        name: String(user.name),
        indetity: String(user.indetity),

    }, SECRET, {
        expiresIn: 30 * 60, //设置过期时间  单位s
    })  //签名   

    res.send({
        user,
        token: "Bearer " + token
    })
})

jwt签名加密生成token值存入localstroge 选择加密的字段 后面可以用jwt-decode进行解析得到想要的数据 并使用vuex/pinia进行全局数据管理

前端使用element-plus 代码：

<script setup lang="ts">
import { ref, reactive} from 'vue'
import { registerType} from '../utils/types'
import { ElMessage, FormInstance } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from '../utils/http' //请求
import jwt_decode from 'jwt-decode'
import { useAuthStore } from '../store/index'
import qs from 'qs' //请求
const ruleFormRef = ref<FormInstance>()
const router = useRouter()
const store = useAuthStore()
const loginUser = ref<registerType>({
  email: '',
  password: '',
})
const handleSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      var data = qs.stringify({
        email: loginUser.value.email,
        password: loginUser.value.password,
      })
      var config = {
        method: 'post',
        url: '/api/login',
        data: data,
      }
      axios(config)
        .then(function (response) {
          const { token } = response.data
          localStorage.setItem('token', token)
          //解析token
          const decode = jwt_decode(token)
          store.setAuth(!!decode)
          store.setUser(decode)
          // console.log(decode)
          if (token) {
            ElMessage({
              message: '用户登录成功',
              type: 'success',
            })
            router.push('/home')
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    } else {
      console.log('密码错误')
      return false
    }
  })
}

const rules = reactive({
  email: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
})
</script>
<template>
  <div class="login">
    <section class="form-container">
      <div class="manage-tip">
        <span class="title">后台管理系统</span>

        <el-form ref="ruleFormRef" :rules="rules" :model="loginUser" class="loginForm" label-width="80px">
          <el-form-item label="账号" prop="email">
            <el-input v-model="loginUser.email" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginUser.password" type="password" placeholder="请输入密码" />
          </el-form-item>

          <el-form-item>
            <el-button @click="handleSubmit(ruleFormRef)" class="submit-btn">登录</el-button>
          </el-form-item>
          <div class="tip">
            <p>
              还没有账号？现在<router-link to="/register">注册</router-link>
            </p>
          </div>
        </el-form>
      </div>
    </section>
  </div>
</template>

使用组件代码，进行调整，store进行全局数据管理。