vue和springboot前后端分离通过一个登录实例，添加token

后端：
1.编写查询SQL
dao层
UserDao

@Select("select * from users where userId= #{userId} and password= #{pwd}")
    User login(String userId , String pwd);

2.Service层
token.key在application.properties自定义配置
UserService.java

import cn.hutool.jwt.JWTUtil;
import com.beimao.dao.UserDao;
import com.beimao.entity.User;
import com.beimao.model.UserLoginDto;
import com.beimao.model.UserRegisterDto;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.HashMap;
import java.util.Map;

@Service
public class UserService {

    @Value("${token.key}")
    private String tokenKey;

    @Autowired
    private UserDao userDao;
    
    public String login(UserLoginDto userLoginInfo) throws Exception {

        User user = userDao.login(userLoginInfo.getUserId(), userLoginInfo.getPwd());

        if (user == null) {
            throw new Exception("用户不存在");
        }
        //生成token
        Map<String, Object> map = new HashMap<>();
        map.put("id", user.getId());
        map.put("userId", user.getUserId());
        map.put("expire_time", System.currentTimeMillis() + 1000 * 60 * 60 * 24 * 15);
        String token = JWTUtil.createToken(map, this.tokenKey.getBytes());
        return token;
    }
    }

3.controller层
UserController.java

import cn.hutool.core.util.StrUtil;
import com.beimao.model.UserLoginDto;
import com.beimao.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.concurrent.TimeUnit;

@RestController
@RequestMapping("/api")
public class UserController {

    @Autowired
    private UserService userService;
  
    @PostMapping("/login")
    public String login(@RequestBody UserLoginDto userLoginInfo) throws Exception {

        String token = userService.login(userLoginInfo);
        return token;
    }

前端：

<template>
  <div id="logindiv">
    <el-row justify="center" align="middle" style="height: 90vh">
      <el-col :span="9">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>欢迎使用北猫商城管理系统</span>
            </div>
          </template>
          <el-form :model="ruleForm" label-width="120px" ref="ruleFormRef" :rules="rules">
            <el-form-item label="账号:" prop="userId">
              <el-input v-model="ruleForm.userId" placeholder="请输入您的邮箱" />
            </el-form-item>
            <el-form-item label="密码:" prop="pwd1">
              <el-input
                v-model="ruleForm.pwd1"
                type="password"
                placeholder="请输入您的密码"
              />
            </el-form-item>
            <el-form-item label="确认密码:" prop="pwd2">
              <el-input
                v-model="ruleForm.pwd2"
                type="password"
                placeholder="再次输入密码"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
              <el-button @click="resetForm(ruleFormRef)">重填</el-button>
            </el-form-item>
           <!-- 超链接 -->
            <el-form-item>
              <el-link href="/#/register" type="danger"> 还没有账号？去注册</el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
// MD5加密
import { Md5 } from 'ts-md5';
// vue参数
import { ref, reactive, onMounted } from "vue";
// 消息提示
import { ElMessage } from "element-plus";
//pinia本地储存
import { storeToRefs } from "pinia";
import appStore from "@/store/appStore";
//token
import jwtDecode from "jwt-decode";
//axios封装
import http from "@/http/index";
// 路由
import { useRoute, useRouter } from "vue-router";
// 属性校验
import type { FormInstance, FormRules } from "element-plus";
const route = useRoute();
const router = useRouter();
let { user, token } = storeToRefs(appStore());
const ruleFormRef = ref<FormInstance>();
 
 const ruleForm = reactive({
  userId: "ohftiaq3691@163.com",
  pwd1: "123456",
  pwd2: "123456",
});

const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== ruleForm.pwd1) {
    callback(new Error("两次密码不匹配!"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules>({
  userId: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    //{ min: 3, max: 5, message: '至少 3 to 5', trigger: 'blur' },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  pwd1: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "至少 6", trigger: "blur" },
  ],

  pwd2: [{ validator: validatePass2, trigger: "blur" }],
});

const callApi = () => {
  http
    .post("/api/login", {
      userId: ruleForm.userId,
      pwd: Md5.hashStr("ruleForm.pwd1").toUpperCase(),
    })
  //添加token
  .then((res: any) => {
      const tokenObj: any = jwtDecode(res);
      user.value.id = tokenObj.id;
      user.value.userId = tokenObj.userId;
      token.value = res;
      router.push({ name: "home" });
    })
    .catch((err: any) => {});
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      //验证成功，执行下面方法
      callApi();
    } else {
      // console.log('error submit!', fields)
    }
  });
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped>
#logindiv {
  background: url("../assets/login.jpeg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.title {
  color: white;
}
</style>