快捷導(dǎo)航

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

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

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

前言

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

前端：

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());
        // 獲取登錄地點(diǎn)
        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);
        // 校驗(yàn)token是否有效
        Map<String, Object> stringObjectMap = bean.verifyToken(token);
        boolean bl = false;
        if (stringObjectMap.size() > 0) {
            // 獲取登錄信息
            LoginUser user = (LoginUser) stringObjectMap.get("user");
            // 判斷是否同一臺(tái)電腦、同一瀏覽器、同一操作系統(tǒng)、同一登錄地點(diǎn)
            if (user != null && ipaddr.equals(user.getIpaddr()) && loginLocation.equals(user.getLoginLocation()) && browser.equals(user.getBrowser()) && os.equals(user.getOs())) {
                bl = true;
            }
        }
        if(!bl){
            // 校驗(yàn)不通過時(shí)返回錯(cuò)誤信息--復(fù)用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驗(yàn)證處理
 *
 * @author hhxx
 */
@Component
public class TokenService
{
    // 令牌自定義標(biāo)識(shí)
    @Value("${token.header}")
    private String header;

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

    // 令牌有效期（默認(rèn)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;
    
    /***
     * 驗(yàn)證令牌
     * @param token
     * @return
     */
    public Map<String,Object> verifyToken(String token) {
    	
    	Map<String,Object> resultMap = new HashMap<>();
    	boolean bl = true;
    	try {
    		Claims claims = parseToken(token);
    		// 解析對應(yīng)的權(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驗(yàn)證異常");
    	}
    	
    	return resultMap;
    }
}