Springboot+Vue+shiro实现前后端分离、权限控制的示例代码

Springboot+Vue+shiro实现前后端分离、权限控制的示例代码实现前后端分离、权限控制的示例代码

主要介绍了Springboot+Vue+shiro实现前后端分离、权限控制的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面

随着小编来一起学习学习吧

本文总结自实习中对项目的重构。原先项目采用Springboot+freemarker模版，开发过程中觉得前端逻辑写的实在恶心，后端Controller层还必须返回Freemarker模版的ModelAndView，逐渐有了前后端分

离的想法，由于之前，没有接触过，主要参考的还是网上的一些博客教程等，初步完成了前后端分离，在此记录以备查阅。

一、前后端分离思想一、前后端分离思想

前端从后端剥离，形成一个前端工程，前端只利用Json来和后端进行交互，后端不返回页面，只返回Json数据。前后端之间完全通过public API约定。

二、后端二、后端 Springboot

List<Object> list = jsonObject.getJSONArray("attributes");

List<String> attrList = new LinkedList(list);

Client client = JSON.parseObject(jsonObject.getJSONObject("client").toJSONString(),new TypeReference<Client>(){});

clientService.addClient(client, task, attrList);

return JSONResult.ok();

}

Post请求使用@RequestBody参数接收。

三、前端三、前端 Vue + ElementUI + Vue router + Vuex + axios + webpack

这里主要说一下开发工程中遇到的问题：

1.跨域跨域

public class CommonIntercepter implements HandlerInterceptor {

private final Logger logger = LoggerFactory.getLogger(this.getClass());

@Override

public boolean preHandle(HttpServletRequest request,

HttpServletResponse response, Object handler) throws Exception {

//允许跨域,不能放在postHandle内

response.setHeader("Access-Control-Allow-Origin", "*");

if (request.getMethod().equals("OPTIONS")) {

response.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH");

response.addHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");

if (request.getMethod().equals("OPTIONS")) {

response.addHeader("Access-Control-Allow-Methods", "GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH");

response.addHeader("Access-Control-Allow-Headers", "Content-Type, Accept, Authorization");

}

由于我们在前后端分离中集成了shiro，因此需要在headers中自定义一个'Authorization'字段，此时普通的GET、POST等请求会变成preflighted request，即在GET、POST请求之前会预先发一个

OPTIONS请求，这个后面再说。

2、、server端不是自己开发的，可以在前端加端不是自己开发的，可以在前端加proxyTable。。

不过这个只能在开发的时候用，后续部署，可以把前端项目作为静态资源放到后端，这样就不存在跨域（由于项目需要，我现在是这么做的，根据网上博客介绍，可以使用nginx，具体怎么做可以在网上

搜一下）。

遇到了网上很多人说的，proxyTable无论如何修改，都没效果的现象。

1、、OPTIONS请求不带请求不带'Authorization'请求头字段：请求头字段：

前后端分离项目中，由于跨域，会导致复杂请求，即会发送preflighted request，这样会导致在GET／POST等请求之前会先发一个OPTIONS请求，但OPTIONS请求并不带shiro的'Authorization'字段

（shiro的Session），即OPTIONS请求不能通过shiro验证，会返回未认证的信息。

解决方法：给shiro增加一个过滤器，过滤OPTIONS请求

public class CORSAuthenticationFilter extends FormAuthenticationFilter {

private static final Logger logger = LoggerFactory.getLogger(CORSAuthenticationFilter.class);

public CORSAuthenticationFilter() {

super();

}

@Override

return super.isAccessAllowed(request, response, mappedValue);

}

@Override

protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {

HttpServletResponse res = (HttpServletResponse)response;

res.setHeader("Access-Control-Allow-Origin", "*");

res.setStatus(HttpServletResponse.SC_OK);