Spring Boot + Vue + Shiro 實作前後端分離，寫得太好了！

一、前後端分離思想

前端從後端剝離，形成一個前端工程，前端隻利用 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 參數接收。Spring Boot 最新教程和示例源碼：https://github.com/javastacks/spring-boot-best-practice

三、前端 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: *"

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 請求，這個後面再說。

https://blog.csdn.net/cc1314_/article/details/78272329

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

不過這個隻能在開發的時候用，後續部署，可以把前端項目作為靜态資源放到後端，這樣就不存在跨域（由于項目需要，我現在是這麼做的，根據網上部落格介紹，可以使用 nginx，具體怎麼做可以在網上搜一下）。

遇到了網上很多人說的，proxyTable 無論如何修改，都沒效果的現象。

1、（非常重要）確定 proxyTable 配置的位址能通路，因為如果不能通路，在浏覽器 F12 調試的時候看到的依然會是提示 404。

并且注意，在 F12 看到的 js 提示錯誤的域名，是 js 寫的那個域名，并不是代理後的域名。（l 樓主就遇到這個問題，後端位址缺少了查詢參數，代理設定為後端位址，然而 F12 看到的錯誤依然還是本地的域名，并不是代理後的域名）

2、就是要手動再執行一次 npm run dev

四、前後端分離項目中內建 shiro

可以參考：

這裡說一下實際開發內建過程中遇到的問題：

1、OPTIONS 請求不帶'Authorization'請求頭字段：

前後端分離項目中，由于跨域，會導緻複雜請求，即會發送 preflighted request，這樣會導緻在 GET／POST 等請求之前會先發一個 OPTIONS 請求，但 OPTIONS 請求并不帶 shiro 的'Authorization'字段（shiro 的 Session），即 OPTIONS 請求不能通過 shiro 驗證，會傳回未認證的資訊。

public class CORSAuthenticationFilter extends FormAuthenticationFilter {

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

public CORSAuthenticationFilter() {
super();
    }

@Override
public boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
//Always return true if the request's method is OPTIONSif (request instanceof HttpServletRequest) {
if (((HttpServletRequest) request).getMethod().toUpperCase().equals("OPTIONS")) {
return true;
            }
        }
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);
res.setCharacterEncoding("UTF-8");
PrintWriter writer = res.getWriter();
Map<String, Object> map= new HashMap<>();
map.put("code", 702);
map.put("msg", "未登入");
writer.write(JSON.toJSONString(map));
writer.close();
return false;
    }
}

@Configuration
public class ShiroConfig {

@Bean
public Realm realm() {
return new DDRealm();
    }

@Bean
public CacheManager cacheManager() {
return new MemoryConstrainedCacheManager();
    }

/**
* cookie對象;
* rememberMeCookie()方法是設定Cookie的生成模版，比如cookie的name，cookie的有效時間等等。
* @return
*/
@Bean
public SimpleCookie rememberMeCookie(){
//System.out.println("ShiroConfiguration.rememberMeCookie()");
//這個參數是cookie的名稱，對應前端的checkbox的name = rememberMe
SimpleCookie simpleCookie = new SimpleCookie("rememberMe");
//<!-- 記住我cookie生效時間30天 ,機關秒;-->
simpleCookie.setMaxAge(259200);
return simpleCookie;
    }

/**
* cookie管理對象;
* rememberMeManager()方法是生成rememberMe管理器，而且要将這個rememberMe管理器設定到securityManager中
* @return
*/
@Bean
public CookieRememberMeManager rememberMeManager(){
//System.out.println("ShiroConfiguration.rememberMeManager()");
CookieRememberMeManager cookieRememberMeManager = new CookieRememberMeManager();
cookieRememberMeManager.setCookie(rememberMeCookie());
//rememberMe cookie加密的密鑰 建議每個項目都不一樣 預設AES算法 密鑰長度(128 256 512 位)
cookieRememberMeManager.setCipherKey(Base64.decode("2AvVhdsgUs0FSA3SDFAdag=="));
return cookieRememberMeManager;
    }

@Bean
public SecurityManager securityManager() {
DefaultWebSecurityManager sm = new DefaultWebSecurityManager();
sm.setRealm(realm());
sm.setCacheManager(cacheManager());
//注入記住我管理器
sm.setRememberMeManager(rememberMeManager());
//注入自定義sessionManager
sm.setSessionManager(sessionManager());
return sm;
    }

//自定義sessionManager
@Bean
public SessionManager sessionManager() {
return new CustomSessionManager();
    }

public CORSAuthenticationFilter corsAuthenticationFilter(){
return new CORSAuthenticationFilter();
    }

@Bean(name = "shiroFilter")
public ShiroFilterFactoryBean getShiroFilterFactoryBean(SecurityManager securityManager) {
ShiroFilterFactoryBean shiroFilter = new ShiroFilterFactoryBean();
shiroFilter.setSecurityManager(securityManager);
//SecurityUtils.setSecurityManager(securityManager);
Map<String, String> filterChainDefinitionMap = new LinkedHashMap<>();
//配置不會被攔截的連結，順序判斷
filterChainDefinitionMap.put("/", "anon");
filterChainDefinitionMap.put("/static/js/**", "anon");
filterChainDefinitionMap.put("/static/css/**", "anon");
filterChainDefinitionMap.put("/static/fonts/**", "anon");
filterChainDefinitionMap.put("/login/**", "anon");
filterChainDefinitionMap.put("/corp/call_back/receive", "anon");
//authc:所有url必須通過認證才能通路，anon:所有url都可以匿名通路
filterChainDefinitionMap.put("/**", "corsAuthenticationFilter");
shiroFilter.setFilterChainDefinitionMap(filterChainDefinitionMap);
//自定義過濾器
Map<String, Filter> filterMap = new LinkedHashMap<>();
filterMap.put("corsAuthenticationFilter", corsAuthenticationFilter());
shiroFilter.setFilters(filterMap);

return shiroFilter;
    }

/**
* Shiro生命周期處理器 * @return
*/
@Bean
public LifecycleBeanPostProcessor lifecycleBeanPostProcessor() {
return new LifecycleBeanPostProcessor();
    }

/**
* 開啟Shiro的注解(如@RequiresRoles,@RequiresPermissions),需借助SpringAOP掃描使用Shiro注解的類,并在必要時進行安全邏輯驗證 * 配置以下兩個bean(DefaultAdvisorAutoProxyCreator(可選)和AuthorizationAttributeSourceAdvisor)即可實作此功能 * @return
*/
@Bean
@DependsOn({"lifecycleBeanPostProcessor"})
public DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator() {
DefaultAdvisorAutoProxyCreator advisorAutoProxyCreator = new DefaultAdvisorAutoProxyCreator();
advisorAutoProxyCreator.setProxyTargetClass(true);
return advisorAutoProxyCreator;
    }

@Bean
public AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor(SecurityManager securityManager) {
AuthorizationAttributeSourceAdvisor authorizationAttributeSourceAdvisor = new AuthorizationAttributeSourceAdvisor();
authorizationAttributeSourceAdvisor.setSecurityManager(securityManager);
return authorizationAttributeSourceAdvisor;
    }
}

shiro session 預設失效時間是 30min，我們在自定義的 sessionManager 的構造函數中設定失效時間為其他值

public class CustomSessionManager extends DefaultWebSessionManager {

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

private static final String AUTHORIZATION = "Authorization";

private static final String REFERENCED_SESSION_ID_SOURCE = "Stateless request";

public CustomSessionManager() {
super();
setGlobalSessionTimeout(DEFAULT_GLOBAL_SESSION_TIMEOUT * 48);
    }

@Override
protected Serializable getSessionId(ServletRequest request, ServletResponse response) {
String sessionId = WebUtils.toHttp(request).getHeader(AUTHORIZATION);//如果請求頭中有 Authorization 則其值為sessionId
if (!StringUtils.isEmpty(sessionId)) {
request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID_SOURCE, REFERENCED_SESSION_ID_SOURCE);
request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID, sessionId);
request.setAttribute(ShiroHttpServletRequest.REFERENCED_SESSION_ID_IS_VALID, Boolean.TRUE);
return sessionId;
        } else {
//否則按預設規則從cookie取sessionId
return super.getSessionId(request, response);
        }
    }
}

五、部署項目

前端項目部署主要分兩種方法：

1、将前端項目打包（npm run build）成靜态資源檔案，放入後端，一起打包。後端寫一個 Controller 傳回前端界面（我使用 Vue 開發的是單頁面應用），但是這樣其實又将前後端耦合在一起了，不過起碼做到前後端分離開發，友善開發的目的已經達成，也初步達成了要求，由于項目的需要，我是這樣做的，并且免去了跨域問題。

@RequestMapping(value = {"/", "/index"}, method = RequestMethod.GET)
public String index() {
return "/index";
}

2. 将前端工程另啟一個服務（tomcat，nginx，nodejs），這樣有跨域的問題。

說一下我遇到的問題：

1、nginx 反向代理，導緻當通路無權限的頁面時，shiro 302 到 unauth 的 controller，通路的位址是 https，重定向位址是 http，導緻了無法通路。

不使用 shiro 的 shiroFilter.setLoginUrl("/unauth");

當頁面無權限通路時，我們在過濾器裡直接傳回錯誤資訊，不利用 shiro 自帶的跳轉。看過濾器中的 onAccessDenied 函數

public class CORSAuthenticationFilter extends FormAuthenticationFilter {

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

public CORSAuthenticationFilter() {
super();
    }

@Override
public boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) {
//Always return true if the request's method is OPTIONS
if (request instanceof HttpServletRequest) {
if (((HttpServletRequest) request).getMethod().toUpperCase().equals("OPTIONS")) {
return true;
            }
        }
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);
res.setCharacterEncoding("UTF-8");
PrintWriter writer = res.getWriter();
Map<String, Object> map= new HashMap<>();
map.put("code", 702);
map.put("msg", "未登入");
writer.write(JSON.toJSONString(map));
writer.close();
return false;
    }
}

先記錄這麼多，有不對的地方，歡迎指出！

Spring Boot + Vue + Shiro 實作前後端分離，寫得太好了！

一、前後端分離思想

二、後端 Springboot

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

四、前後端分離項目中內建 shiro

五、部署項目

繼續閱讀

關于Gradle配置的小結

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method