4 登录接口实现（Vue3+Spring boot+mysql）

4.1 登录接口

请求路径：http://localhost:8082/sys/user/login
请求方式：POST
接口描述：打开redis，实现登录用户，并返回token。
请求参数：postman中使用 raw 模式，提交JSON格式请求体。

{
“username”:“sunwukong”,
“password”:“123456”
}

4.2 后台功能（SpringBoot +myBatis plus）

    @PostMapping("/login")
    public Result selectUser(@RequestParam("username") String userName,@RequestParam("password") String userPassword){
        System.out.println("收到前端请求");
        System.out.println(userName);
        System.out.println(userPassword);
        String newpwd = Md5Util.getMD5String(userPassword);
        QueryWrapper<User> user_login = new QueryWrapper<>();
        user_login.eq("user_name", userName).eq("user_password",newpwd);
        User user1 = iUserService.getOne(user_login);
        if (user1 != null) {
            System.out.println("User found: " + user1);
            HashMap<String , Object> claims = new HashMap<>();
            claims.put("userId",user1.getUserId());
            claims.put("userName",user1.getUserName());
            String token = JwtUtil.genToken(claims);

            user1.setUserPassword(null);
            redisTemplate.opsForValue().set(token,user1,30, TimeUnit.MINUTES);
            return Result.success(token);
        }
        return Result.error("用户名或者密码不正确!");
    }

4.3 打开高速缓冲Redis(保存用户登录状态)

4.4 前端功能（axios+pinia）

4.4.1 Login.vue组件中引入token

import { useTokenStore } from '@/stores/token.js'

const tokenStore = useTokenStore()

4.4.2 在src/api/user.js中提供访问登录接口的函数

//登录
export const loginService = (loginData) => {
    var params = new URLSearchParams()
    for (let key in loginData) {
        params.append(key, loginData[key])
    }
    return request.post('/user/login', params)
}

4.4.3 在Login.vue中完成登录接口调用

// 导入loginService
import { loginService } from '@/api/user'
//用于登录的事件函数
const login = async () => {
    let result = await loginService(registerData.value)
    // if (result.code == 0) {
    //     alert('登录成功!')
    // } else {
    //     alert('登录失败!')
    // }
    //保存token
    console.log("结果是" + result);
    tokenStore.setToken(result.data)
    ElMessage.success(result.msg ? result.msg : '登录成功')
    router.push('/')
}

4.4.4 在views下新增首页组件LayoutVue.vue组件，并设置路由规则

import { createRouter, createWebHistory } from 'vue-router'
import LayoutVue from '../views/LayoutVue.vue'
import Login from '../views/Login.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/',
      component: LayoutVue
    }
  ]
})

export default router

并在Login.vue中引入路由

import router from '@/router'

4.5 修改首页App.vue代码 显示路由视图

<template>
  <!-- 显示路由视图 -->
  <router-view></router-view>
</template>

<script setup>


</script>

4.6 功能验证

登录失败，响应错误消息

登录成功，跳转到首页组件