vue前后分离session实现_关于前后端分离(springboot、vue、cas实现SSO)

A、传统意义来讲,前后端不分离的项目进行集成cas,很简单,很方便,不再赘述,简单描述如下:

a1、后台服务集成CAS,主要就是引入jar包依赖,集成CAS过滤器并制定其order优先级高

a2、此时后台服务就会很轻松的集成了CAS实现所谓的SSO

B、但是现在项目都是前后端分离,对于前后端分离有一个难点,就是如何集成,如果后台模式不变,依然集成CAS,追加CAS过滤器,那么前端服务拿到后台的重定向(CAS校验不通过,重定向到CAS服务配置的登录页面)如何处理?跨域?临时解决方案:

b1、需要去掉后台集成的CAS过滤器,

b2、前端配置拦截器,没有登录的话需要去请求CAS服务器,并声明需要拿到jwt,并将jwt作为cookie写入本地

b3、前端将拿到的jwt去请求后台,携带cookie jwt

b4、后端自己写的那个过滤器去校验jwt是否合法,不合法响应接口生成json标记为重定向,此处重定向不是用response.sendRedirect(...),而是将声明重定向,前端拿到该重定向标记去请求CAS服务器拿jwt,重回上述B2步骤,如果后台校验成功则正常chain.doFilter(...)即可

b5、如此就是前后端分离的SSO,后台是Springboot,前端是Vue,SSO服务是独立的CAS服务器

备注:关于前后端分离的文章,在网上翻了遍,也没有找到合适的,最终还是摸索中前进,找到了替代方案,这个方案感觉差点意思,但是偷梁换柱实现了简单的SSO,众大佬有好的方案一起成长。

过滤器代码如下:

```

import com.alibaba.fastjson.JSONObject;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import org.springframework.http.ResponseEntity;

import org.springframework.util.StringUtils;

import org.springframework.web.client.RestTemplate;

import javax.servlet.FilterConfig;

import javax.servlet.*;

import javax.servlet.http.Cookie;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.servlet.http.HttpSession;

import javax.validation.constraints.NotNull;

import java.io.IOException;

import java.net.URLDecoder;

import java.util.Enumeration;

/**

* Created with IntelliJ IDEA 2019.

* Project:SmartES

* User: WANG PO

* Date: 2019-07-02 18:30:23

* Version:1.0.0

* Description: 过滤器

*

* @author wangpo

*/

public class LocalUserInfoFilterimplements Filter {

Loggerlogger = LoggerFactory.getLogger(LocalUserInfoFilter.class);

@Override

public void init(FilterConfig filterConfig)throws ServletException {

}

@Override

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {

HttpServletRequestrequest_= (HttpServletRequest) request;

HttpServletResponseresponse_= (HttpServletResponse) response;

HttpSession session = request_.getSession();

Enumeration attributeNames = session.getAttributeNames();

while (attributeNames.hasMoreElements()) {

System.err.println("session " + attributeNames.nextElement());

}

//增加校验

String jwt = loadJWTOrUrl(request_, "jwt");

ResponseEntity responseEntity =null;

if (!StringUtils.isEmpty(jwt)) {

JSONObject jsonObject =new JSONObject();

logger.warn("前端获取到jwt={}", jwt);

String decode = URLDecoder.decode(jwt, "UTF-8");

logger.warn("转码后的获取到decode={}", decode);

String[] split = decode.split("&");

jsonObject.put("token", split[0]);

try {

try {

responseEntity =new RestTemplate().postForEntity("http:/xxxxxxxx.com/api-token-verify/", jsonObject, String.class);

System.err.println("responseEntity.getStatusCode().value():" + responseEntity.getStatusCode().value());

}catch (Exception e) {

logger.warn("appear  error  {}", e.getMessage());

jsonObject =new JSONObject();

//此处的状态码为了前端控制重定向而不是采取服务器重定向

jsonObject.put("sso_status", "302");

response_.getWriter().write(jsonObject.toJSONString());

logger.warn("手动重定向------------------------------");

return;

}

}catch (Exception e) {

e.printStackTrace();

}

}else {

response_.reset();

JSONObject jsonObject =new JSONObject();

//此处的状态码为了前端控制重定向而不是采取服务器重定向

jsonObject.put("sso_status", "302");

response_.getWriter().write(jsonObject.toJSONString());

logger.warn("手动重定向------------------------------");

return;

}

//校验jwt如果校验失败则直接进行重定向

chain.doFilter(request_, response_);

}

/**

* 优先从header中获取jwt,如果没有则从cookie中获取jwt

* @param request_

* @return

*/

private StringloadJWTOrUrl(HttpServletRequestrequest_, @NotNull(message ="key not empty when try loadJWTOrUrl") String key) {

String jwt = request_.getHeader(key);

if (!StringUtils.isEmpty(jwt)) {

return jwt;

}

Cookie[] cookies = request_.getCookies();

if (cookies !=null) {

for (Cookie cookie : cookies) {

String name = cookie.getName();

String value = cookie.getValue();

if (key.equalsIgnoreCase(name)) {

return value;

}

}

}

return null;

}

@Override

public void destroy() {

}

}

```

个人过滤器代码:

```

import org.jasig.cas.client.session.SingleSignOutFilter;

import org.springframework.beans.factory.annotation.Value;

import org.springframework.boot.web.servlet.FilterRegistrationBean;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

/**

* Created with IntelliJ IDEA 2019.

* Project:SmartES

* User: WANG PO

* Date: 2019-07-02 18:30:23

* Version:1.0.0

* Description: 过滤器配置

*

* @author wangpo

*/

@Configuration

public class FilterConfig {

/**

* 注册自身过滤器

* @return

*/

@Bean

public FilterRegistrationBeanregistrationBean() {

FilterRegistrationBean registrationBean =new FilterRegistrationBean();

registrationBean.setFilter(new LocalUserInfoFilter());

registrationBean.addUrlPatterns("/*");

registrationBean.setName("localUserInfoFilter");

registrationBean.setOrder(1);

return registrationBean;

}

}

```

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Spring Boot 和 Vue 前后端分离架构中,实现文件预览可以通过前端发送请求获取文件的 URL,然后在前端使用相关插件或组件进行文件预览。 下面是一种可能的实现方式: 1. 后端实现: - 在 Spring Boot 中配置静态资源路径,将存储文件的文件夹路径设置为静态资源路径。例如,可以在 `application.properties` 文件中添加以下配置: ``` spring.resources.static-locations=file:/path/to/files/ ``` - 后端提供一个接口,用于返回文件的URL。可以在控制器中编写如下代码: ```java @RestController public class FileController { @Value("${spring.resources.static-locations}") private String staticResourcePath; @GetMapping("/api/file/{fileName}") public ResponseEntity<Resource> getFile(@PathVariable String fileName) throws IOException { Path filePath = Paths.get(staticResourcePath + fileName); Resource resource = new UrlResource(filePath.toUri()); if (resource.exists() && resource.isReadable()) { return ResponseEntity.ok() .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + fileName + "\"") .body(resource); } else { // 文件不存在或无法读取 return ResponseEntity.notFound().build(); } } } ``` 2. 前端实现: - 在 Vue 组件中,使用 axios 或其他网络请求库发送 GET 请求,获取文件的 URL。例如: ```javascript import axios from 'axios'; // 在组件中调用接口获取文件 URL axios.get('/api/file/fileName.pdf') .then(response => { const fileUrl = response.data; // 使用文件预览插件或组件进行预览 // 例如,可以使用 pdf.js 进行 PDF 文件预览 // 或者使用 <img> 标签显示图片、使用 <video> 标签播放视频等 }) .catch(error => { console.error(error); }); ``` 需要注意的是,上述代码只是一种简单的实现方式,具体的预览方式和插件选择取决于你要预览的文件类型。你可以根据实际需求选择合适的插件或组件来实现文件预览功能,例如 pdf.js、viewer.js 等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值