首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue前端img访问鉴权后端拦截

vue前端img访问鉴权后端进行拦截的代码示例

2024-03-15 09:20:34 作者：wengelovelian

路由拦截是一种在用户访问特定页面之前对其进行拦截和处理的机制,下面这篇文章主要给大家介绍了关于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;
    }
}

总结

到此这篇关于vue前端img访问鉴权后端进行拦截的文章就介绍到这了,更多相关vue前端img访问鉴权后端拦截内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue中axios的封装（报错、鉴权、跳转、拦截、提示）