vue前端img访问鉴权，后端进行拦截

此文章为了解决匿名可以访问图片问题，有的文章是重构了el-img组件，使用blob重新进行加载。该文章是换个思路，在图片访问地址后面追加token参数，后端进行拦截，判断token是否有效，无效则拦截。反之通过。同时会校验是否同一台电脑、同一浏览器、同一操作系统、同一登录地点

前端：

image-preview组件：

<template>
  <el-image
    :src="`${realSrc}`"
    fit="cover"
    :style="`width:${realWidth};height:${realHeight};`"
    :preview-src-list="realSrcList"
    append-to-body="true"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><picture-filled /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<script setup>
import { isExternal } from "@/utils/validate";
import { getToken } from "@/utils/auth";
import {watch} from "vue";

const tokenInfo = ref(getToken())

const props = defineProps({
  src: {
    type: String,
    required: true
  },
  srcViewerList: {
    type: Array
  },
  width: {
    type: [Number, String],
    default: ""
  },
  height: {
    type: [Number, String],
    default: ""
  }
});

const realSrc = computed(() => {
  let real_src = props.src.split(",")[0];
  if (isExternal(real_src)) {
    return real_src;
  }
  return import.meta.env.VITE_APP_BASE_API + real_src + '?token=' + tokenInfo.value;
});

const realSrcList = ref([]);
watch(() => {
  props.srcViewerList.forEach(item => {
    realSrcList.value.push(item + '?token=' + tokenInfo.value)
  });
})

// const realSrcList = computed(() => {
//   let real_src_list = props.src.split(",");
//   let srcList = [];
//   real_src_list.forEach(item => {
//     if (isExternal(item)) {
//       return srcList.push(item);
//     }
//     return srcList.push(import.meta.env.VITE_APP_BASE_API + item + '?token=' + tokenInfo.value);
//   });
//   return srcList;
// });

const realWidth = computed(() =>
  typeof props.width == "string" ? props.width : `${props.width}px`
);

const realHeight = computed(() =>
  typeof props.height == "string" ? props.height : `${props.height}px`
);
</script>

<style lang="scss" scoped>
.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;
  :deep(.el-image__inner) {
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      transform: scale(1.2);
    }
  }
  :deep(.image-slot) {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}
</style>

后端拦截器：

ProfileInterceptorConfig.java

package com.fuel.framework.config;

import com.fuel.framework.interceptor.ProfileInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * 通用配置
 * 
 * @author hhxx
 */
@Configuration
public class ProfileInterceptorConfig implements WebMvcConfigurer
{
    @Autowired
    private ProfileInterceptor profileInterceptor;

    /**
     * 自定义拦截规则
     */
    @Override
    public void addInterceptors(InterceptorRegistry registry)
    {
        registry.addInterceptor(profileInterceptor)
                .addPathPatterns("/profile/**");
    }

}

ProfileInterceptor.java

package com.fuel.framework.interceptor;

import com.alibaba.fastjson2.JSON;
import com.fuel.common.constant.HttpStatus;
import com.fuel.common.core.domain.AjaxResult;
import com.fuel.common.core.domain.model.LoginUser;
import com.fuel.common.utils.ServletUtils;
import com.fuel.common.utils.StringUtils;
import com.fuel.common.utils.ip.AddressUtils;
import com.fuel.common.utils.ip.IpUtils;
import com.fuel.common.utils.spring.SpringUtils;
import com.fuel.framework.security.handle.AuthenticationEntryPointImpl;
import com.fuel.framework.web.service.TokenService;
import eu.bitwalker.useragentutils.UserAgent;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;

@Component
public class ProfileInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception
    {
        //获取token
        String token = request.getParameter("token");
        // 获取用户代理
        UserAgent userAgent = UserAgent.parseUserAgentString(ServletUtils.getRequest().getHeader("User-Agent"));
        // 获取ip
        String ipaddr = IpUtils.getIpAddr(ServletUtils.getRequest());
        // 获取登录地点
        String loginLocation = AddressUtils.getRealAddressByIP(ipaddr);
        // 获取浏览器
        String browser = userAgent.getBrowser().getName();
        // 获取操作系统
        String os = userAgent.getOperatingSystem().getName();
        TokenService bean = SpringUtils.getBean(TokenService.class);
        AuthenticationEntryPointImpl authenticationEntryPointImpl = SpringUtils.getBean(AuthenticationEntryPointImpl.class);
        // 校验token是否有效
        Map<String, Object> stringObjectMap = bean.verifyToken(token);
        boolean bl = false;
        if (stringObjectMap.size() > 0) {
            // 获取登录信息
            LoginUser user = (LoginUser) stringObjectMap.get("user");
            // 判断是否同一台电脑、同一浏览器、同一操作系统、同一登录地点
            if (user != null && ipaddr.equals(user.getIpaddr()) && loginLocation.equals(user.getLoginLocation()) && browser.equals(user.getBrowser()) && os.equals(user.getOs())) {
                bl = true;
            }
        }
        if(!bl){
            // 校验不通过时返回错误信息--复用Spring Security框架的信息
            authenticationEntryPointImpl.commence(request, response, null);
        }
        return bl;
    }
}

TokenService.java

package com.fuel.framework.web.service;

import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.TimeUnit;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson2.JSONArray;
import com.alibaba.fastjson2.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;

import com.auth0.jwt.exceptions.JWTVerificationException;
import com.auth0.jwt.exceptions.TokenExpiredException;
import com.fuel.common.constant.Constants;
import com.fuel.common.core.domain.AjaxResult;
import com.fuel.common.core.domain.model.LoginUser;
import com.fuel.common.core.redis.RedisCache;
import com.fuel.common.utils.MessageUtils;
import com.fuel.common.utils.ServletUtils;
import com.fuel.common.utils.StringUtils;
import com.fuel.common.utils.http.HttpUtils;
import com.fuel.common.utils.ip.AddressUtils;
import com.fuel.common.utils.ip.IpUtils;
import com.fuel.common.utils.uuid.IdUtils;

import eu.bitwalker.useragentutils.UserAgent;
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.ExpiredJwtException;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

/**
 * token验证处理
 *
 * @author hhxx
 */
@Component
public class TokenService
{
    // 令牌自定义标识
    @Value("${token.header}")
    private String header;

    // 令牌秘钥
    @Value("${token.secret}")
    private String secret;

    // 令牌有效期（默认30分钟）
    @Value("${token.expireTime}")
    private int expireTime;

    protected static final long MILLIS_SECOND = 1000;

    protected static final long MILLIS_MINUTE = 60 * MILLIS_SECOND;

    private static final Long MILLIS_MINUTE_TEN = 20 * 60 * 1000L;

    @Autowired
    private RedisCache redisCache;
    
    /***
     * 验证令牌
     * @param token
     * @return
     */
    public Map<String,Object> verifyToken(String token) {
        
        Map<String,Object> resultMap = new HashMap<>();
        boolean bl = true;
        try {
            Claims claims = parseToken(token);
            // 解析对应的权限以及用户信息
            String uuid = (String) claims.get(Constants.LOGIN_USER_KEY);
            String userKey = getTokenKey(uuid);
            LoginUser user = JSONObject.parseObject(redisCache.getCacheObject(userKey),LoginUser.class);
            if(user != null) {
                bl = true;
                resultMap.put("bl", bl);
            }else {
                bl = false;
                resultMap.put("bl", bl);
                resultMap.put("msg", "token已过期");
            }
        }catch (ExpiredJwtException  eje) {
            bl = false;
            resultMap.put("bl", bl);
            resultMap.put("msg", "token已过期");
        }
        catch(Exception ex) {
            bl = false;
            resultMap.put("bl", bl);
            resultMap.put("msg", "token验证异常");
        }
        
        return resultMap;
    }
    
}