import request from '@/utils/request'
import type { userLogin } from '@/types/userLogin'
// 枚舉管理注冊(cè)模塊接口地址
enum API {
  // 注冊(cè)接口地址
  REGISTER = '/user/register',
  GET_CODE = '/auth',
  VERIFY_CODE = '/auth',
  LOGIN = '/user/login',
  FIND_PASSWORD = '/user/changePasswordByEmail',
}
//注冊(cè)函數(shù)
export const goRegister = (user: userLogin) => {
  // 直接傳遞 user 對(duì)象
  return request.post(API.REGISTER, user)
}
export const getCode = (email: string) => {
  return request
    .post(`${API.GET_CODE}/send-code?email=${encodeURIComponent(email)}`) // 將 email 作為查詢(xún)參數(shù)
    .then((response) => response.data)
    .catch((error) => {
      console.error('獲取驗(yàn)證碼失敗:', error)
      throw error // 拋出錯(cuò)誤以便調(diào)用者處理
    })
}
export const verifyCode = (email: string, code: string) => {
  return request
    .post(
      `${API.VERIFY_CODE}/verify-code?email=${encodeURIComponent(email)}&code=${encodeURIComponent(code)}`
    ) // 將 email 作為查詢(xún)參數(shù)
    .then((response) => response.data)
    .catch((error) => {
      console.error('校驗(yàn)驗(yàn)證碼失敗:', error)
      throw error // 拋出錯(cuò)誤以便調(diào)用者處理
    })
}

   @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允許訪(fǎng)問(wèn)的路徑
                .allowedOrigins("http://localhost:5173") // 允許的源
                .allowedHeaders("*") // 允許的請(qǐng)求頭
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允許的方法
                .allowCredentials(true); // 是否允許發(fā)送憑證
    }

  //配置代理跨域
  server: {
    proxy: {
      '/api': {
        target: "http://localhost:8080",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }

package com.qac.utils;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.JwtBuilder;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import java.nio.charset.StandardCharsets;
import java.util.Date;
import java.util.Map;
public class JwtUtils {
    private final static String signKey = "Admin";//管理員登錄signKey
    private final static Long expire = 7200000L;//過(guò)期時(shí)間為12個(gè)小時(shí)
    /**
     * 生成JWT令牌
     * @param claims JWT第二部分負(fù)載 payload 中存儲(chǔ)的內(nèi)容
     */
    public static String generateJwt(Map<String, Object> claims){
        String jwt = Jwts.builder()
                .addClaims(claims)
                .signWith(SignatureAlgorithm.HS256, signKey)
                .setExpiration(new Date(System.currentTimeMillis() + expire))
                .compact();
        return jwt;
    }
    /**
     * 解析JWT令牌
     * @param jwt JWT令牌
     * @return JWT第二部分負(fù)載 payload 中存儲(chǔ)的內(nèi)容
     */
    public static Claims parseJWT(String jwt){
        Claims claims = Jwts.parser()
                .setSigningKey(signKey)
                .parseClaimsJws(jwt)
                .getBody();
        return claims;
    }
}

package com.qac.interceptor;
import com.alibaba.fastjson.JSONObject;
import com.qac.result.Result;
import com.qac.utils.JwtUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * jwt令牌校驗(yàn)的攔截器
 */
@Component
@Slf4j
public class LoginCheckInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest req, HttpServletResponse res, Object handler) throws Exception {
        //1.獲取請(qǐng)求url
        String url=req.getRequestURL().toString();
        LoginCheckInterceptor.log.info("請(qǐng)求的url--{}",url);
        //獲取請(qǐng)求頭中的token
        String jwt=req.getHeader("token");
        if(!StringUtils.hasLength(jwt)){
            LoginCheckInterceptor.log.info("token為空,未登錄...");
            Result error=Result.error("NOT_LOGIN");
            //這里不是json格式，要轉(zhuǎn)化
            String notLogin= JSONObject.toJSONString(error);
            res.getWriter().write(notLogin);
            return false;
        }
        //解析token,解析失敗就登錄失敗
        try {
            JwtUtils.parseJWT(jwt);
        }catch (Exception e){
            e.printStackTrace();
            LoginCheckInterceptor.log.info("登錄失敗");
            Result error=Result.error("NOT_LOGIN");
            //這里不是json格式，要轉(zhuǎn)化
            String notLogin= JSONObject.toJSONString(error);
            res.getWriter().write(notLogin);
            return false;
        }
        LoginCheckInterceptor.log.info("token合法,放行");
        return true;
    }
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
        System.out.println("postHandle....");
    }
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
        System.out.println("afterHandle....");
    }
}

    protected void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(loginCheckInterceptor)
                .addPathPatterns("/user/**")
                .excludePathPatterns("/user/login")
                .excludePathPatterns("/user/avatar")
                .excludePathPatterns("/user/register")
                .excludePathPatterns("/user/changePasswordByEmail")
                .excludePathPatterns("/auth/**");
    }

    @ApiOperation("用戶(hù)登錄")
    @PostMapping("/login")
    private Result login(@RequestBody UserLogin userLogin){
        log.info("員工登錄:{}",userLogin);
        User user=service.login(userLogin);
        //登錄成功
        if (user!=null){
            HashMap<String, Object> claims = new HashMap<>();
            claims.put("id",user.getId());
            claims.put("email",user.getEmail());
            String jwt= JwtUtils.generateJwt(claims);//jwt中包含了登錄信息
            return Result.success(jwt);
        }
        return Result.error("用戶(hù)名或密碼錯(cuò)誤");
    }

@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserLogin implements Serializable {
    public String email;
    public String password;
}

    @Override
    public User login(UserLogin userLogin) {
        return dao.getByUserEmailAndPassword(userLogin);
    }

    <select id="getByUserEmailAndPassword" resultType="com.qac.entity.User">
        select *from user where email =#{email} AND password = #{password};
    </select>

package com.qac.result;
import lombok.Data;
import java.io.Serializable;
/**
 * 后端統(tǒng)一返回結(jié)果
 * @param <T>
 */
@Data
public class Result<T> implements Serializable {
    private Integer code; //編碼：1成功，0和其它數(shù)字為失敗
    private String msg; //錯(cuò)誤信息
    private T data; //數(shù)據(jù)
    public static <T> Result<T> success() {
        Result<T> result = new Result<T>();
        result.code = 1;
        return result;
    }
    public static <T> Result<T> success(T object) {
        Result<T> result = new Result<T>();
        result.data = object;
        result.code = 1;
        return result;
    }
    public static <T> Result<T> error(String msg) {
        Result result = new Result();
        result.msg = msg;
        result.code = 0;
        return result;
    }
}

import request from '@/utils/request'
import type { userLogin } from '@/types/userLogin'
// 枚舉管理注冊(cè)模塊接口地址
enum API {
  LOGIN = '/user/login',
}
export const goLogin = (email: string, password: string) => {
  return request.post(API.LOGIN, { email, password })
}

import router from '@/router'
import axios from 'axios'
import {globals} from "@/main"
const serverUrl=globals.$config?.serverUrl || 'http://120.27.247.221:8090'
const request = axios.create({
  baseURL: serverUrl,
  timeout: 200000
})
//請(qǐng)求攔截器
request.interceptors.request.use((config: any) => {
 // 可以通過(guò)請(qǐng)求頭攜帶公共參數(shù)
  config.headers['content-type'] = 'application/json'
  const token = JSON.parse(localStorage.getItem('user') || '{}')
  config.headers['token'] = token
  return config
})
//相應(yīng)攔截器
request.interceptors.response.use(
  (response: any) => {
    if (response.data.msg === 'NOT_LOGIN') {
      router.push('/home')
    }
    return response.data
  },
  (error: { message: string | undefined }) => {
    //處理http網(wǎng)絡(luò)錯(cuò)誤
    return Promise.reject(new Error(error.message))
  }
)
//對(duì)外暴露axios
export default request

const serverUrl=globals.$config?.serverUrl || 'http://120.27.247.221:8090'

const request = axios.create({
  baseURL: serverUrl,
  timeout: 200000
})

//請(qǐng)求攔截器
request.interceptors.request.use((config: any) => {
 // 可以通過(guò)請(qǐng)求頭攜帶公共參數(shù)
  config.headers['content-type'] = 'application/json'
  const token = JSON.parse(localStorage.getItem('user') || '{}')
  config.headers['token'] = token
  return config
})

//相應(yīng)攔截器
request.interceptors.response.use(
  (response: any) => {
    if (response.data.msg === 'NOT_LOGIN') {
      router.push('/home')
    }
    return response.data
  },
  (error: { message: string | undefined }) => {
    //處理http網(wǎng)絡(luò)錯(cuò)誤
    return Promise.reject(new Error(error.message))
  }
)

 <form class="form1" @submit.prevent="handleLogin" v-show="login&&!register">
              <p class="heading">登錄</p>
              <el-input
                v-model="user.email"
                style="width: 250px; height: 45px"
                placeholder="郵箱"
              />
              <div v-show="!validateEmail(user.email)" class="warning">請(qǐng)輸入有效的郵箱格式!</div>
              <el-input
                v-model="user.password"
                style="width: 250px; height: 45px"
                type="password"
                placeholder="密碼"
                show-password
              />
              <div v-show="!validatePassword(user.password)" class="warning">
                密碼至少8個(gè)字符,包含數(shù)字和特殊字符!
              </div>
              <div class="align">
                <span class="function" @click="toFind">找回密碼</span>
                <span class="function" @click="toRegister">注冊(cè)賬號(hào)</span>
              </div>
              <button class="btn" type="submit" >登錄</button>
        </form>

const handleLogin = async () => {
  if (validateEmail(user.email) && validatePassword(user.password)) {
    try {
      const response = await goLogin(user.email, user.password)
      console.log('Login successful:', response)
      if (response.data == null) {
        alert('郵箱或密碼錯(cuò)誤')
      } else {
        localStorage.setItem('user', JSON.stringify(response.data))
        alert('登錄成功')
        router.push('mainArticle')
      }
    } catch (error) {
      console.error('Login failed:', error)
    }
  } else {
    alert('郵箱或密碼格式錯(cuò)誤')
  }
}

npm run build