vue前端img訪問鑒權(quán)后端進行攔截的代碼示例

更新時間：2024年03月15日 09:23:18 作者：wengelovelian

路由攔截是一種在用戶訪問特定頁面之前對其進行攔截和處理的機制,下面這篇文章主要給大家介紹了關于vue前端img訪問鑒權(quán)后端進行攔截的相關資料,需要的朋友可以參考下

前言

此文章為了解決匿名可以訪問圖片問題，有的文章是重構(gòu)了el-img組件，使用blob重新進行加載。該文章是換個思路，在圖片訪問地址后面追加token參數(shù)，后端進行攔截，判斷token是否有效，無效則攔截。反之通過。同時會校驗是否同一臺電腦、同一瀏覽器、同一操作系統(tǒng)、同一登錄地點

前端：

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;

    /**
     * 自定義攔截規(guī)則
     */
    @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();
        // 獲取操作系統(tǒng)
        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");
            // 判斷是否同一臺電腦、同一瀏覽器、同一操作系統(tǒng)、同一登錄地點
            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);
    		// 解析對應的權(quán)限以及用戶信息
            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;
    }
}