Springboot + Vue + shiro 实现前后端分离、权限控制

本文总结自实习中对项目的重构。原先项目采用Springboot+freemarker模版，开发过程中觉得前端逻辑写的实在恶心，后端Controller层还必须返回Freemarker模版的ModelAndView，逐渐有了前后端分离的想法，由于之前，没有接触过，主要参考的还是网上的一些博客教程等，初步完成了前后端分离，在此记录以备查阅。

一、前后端分离思想

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

二、后端 Springboot

Springboot就不再赘述了，Controller层返回Json数据。

@RequestMapping(value = "/add", method = RequestMethod.POST)
    @ResponseBody
    public JSONResult addClient(@RequestBody String param) {
        JSONObject jsonObject = JSON.parseObject(param);
        String task = jsonObject.getString("task");
        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

主要参考：

https://cn.vuejs.org/v2/guide/
https://github.com/PanJiaChen/vue-admin-template/blob/master/README-zh.md
https://github.com/PanJiaChen/vue-element-admin

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

1.跨域

由于开发中前端工程使用webpack启了一个服务，所以前后端并不在一个端口下，必然涉及到跨域：

XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。

解决跨域分两种：

1、server端是自己开发的，这样可以在在后端增加一个拦截器

@Component
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");
        }
        return true;
    }
}

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

主要就是在Response Header中增加 "Access-Control-Allow-Origin: *"