簡介

完整程式碼 https://github.com/PuZhiweizuishuai/SpringSecurity-JWT-Vue-Deom

執行展示

後端

主要展示 Spring Security 與 JWT 結合使用構建後端 API 介面。

主要功能包括登陸（如何在 Spring Security 中新增驗證碼登陸），查詢，建立，刪除並對使用者許可權進行區分等等。

ps：由於只是 Demo，所以沒有呼叫資料庫，以上所說增刪改查均在 HashMap 中完成。

前端

展示如何使用 Vue 構建前端後與後端的配合，包括跨域的設定，前端登陸攔截

並實現 POST，GET，DELETE 請求。包括如何在 Vue 中使用後端的 XSRF-TOKEN 防範 CSRF 攻擊

技術棧

實現細節

後端搭建

基礎配置

建立 Spring boot 專案，新增 JJWT 和 Spring Security 的專案依賴，這個非常簡單，有很多的教程都有塊內容，唯一需要注意的是，如果你使用的 Java 版本是 11，那麼你還需要新增以下依賴，使用 Java8 則不需要。

　　　　　<dependency>
            <groupId>javax.xml.bind</groupId>
            <artifactId>jaxb-api</artifactId>
            <version>2.3.0</version>
        </dependency>

要使用 Spring Security 實現對使用者的許可權控制，首先需要實現一個簡單的 User 物件實現 UserDetails 介面，UserDetails 介面負責提供核心使用者的資訊，如果你只需要使用者登陸的賬號密碼，不需要其它資訊，如驗證碼等，那麼你可以直接使用 Spring Security 預設提供的 User 類，而不需要自己實現。

public class User implements UserDetails {
    private String username;
    private String password;
    private Boolean rememberMe;
    private String verifyCode;
    private String power;
    private Long expirationTime;
    private List<GrantedAuthority> authorities;

    /**
    * 省略其它的 get set 方法
    */

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return authorities;
    }

    @Override
    public String getPassword() {
        return password;
    }

    @Override
    public String getUsername() {
        return username;
    }

    @Override
    public boolean isAccountNonExpired() {
        return true;
    }

    @Override
    public boolean isAccountNonLocked() {
        return true;
    }

    @Override
    public boolean isCredentialsNonExpired() {
        return true;
    }

    @Override
    public boolean isEnabled() {
        return true;
    }
}

這個就是我們要使用到的 User 物件，其中包含了 記住我，驗證碼等登陸資訊，因為 Spring Security 整合 Jwt 本質上就是用自己自定義的登陸過濾器，去替換 Spring Security 原生的登陸過濾器，這樣的話，原生的記住我功能就會無法使用，所以我在 User 物件裡添加了記住我的資訊，用來自己實現這個功能。

JWT 令牌認證工具

首先我們來新建一個 TokenAuthenticationHelper 類，用來處理認證過程中的驗證和請求

public class TokenAuthenticationHelper {
    /**
     * 未設定記住我時 token 過期時間
     * */
    private static final long EXPIRATION_TIME = 7200000;

    /**
     * 記住我時 cookie token 過期時間
     * */
    private static final int COOKIE_EXPIRATION_TIME = 1296000;

    private static final String SECRET_KEY = "ThisIsASpringSecurityDemo";
    public static final String COOKIE_TOKEN = "COOKIE-TOKEN";
    public static final String XSRF = "XSRF-TOKEN";

    /**
     * 設定登陸成功後令牌返回
     * */
    public static void addAuthentication(HttpServletRequest request,  HttpServletResponse response, Authentication authResult) throws IOException {
        // 獲取使用者登陸角色
        Collection<? extends GrantedAuthority> authorities = authResult.getAuthorities();
        // 遍歷使用者角色
        StringBuffer stringBuffer = new StringBuffer();
        authorities.forEach(authority -> {
            stringBuffer.append(authority.getAuthority()).append(",");
        });
        long expirationTime = EXPIRATION_TIME;
        int cookExpirationTime = -1;
        // 處理登陸附加資訊
        LoginDetails loginDetails = (LoginDetails) authResult.getDetails();
        if (loginDetails.getRememberMe() != null && loginDetails.getRememberMe()) {
            expirationTime = COOKIE_EXPIRATION_TIME * 1000;
            cookExpirationTime = COOKIE_EXPIRATION_TIME;
        }

        String jwt = Jwts.builder()
                // Subject 設定使用者名稱
                .setSubject(authResult.getName())
                // 設定使用者許可權
                .claim("authorities", stringBuffer)
                // 過期時間
                .setExpiration(new Date(System.currentTimeMillis() + expirationTime))
                // 簽名演算法
                .signWith(SignatureAlgorithm.HS512, SECRET_KEY)
                .compact();
        Cookie cookie = new Cookie(COOKIE_TOKEN, jwt);
        cookie.setHttpOnly(true);
        cookie.setPath("/");
        cookie.setMaxAge(cookExpirationTime);
        response.addCookie(cookie);

        // 向前端寫入資料
        LoginResultDetails loginResultDetails = new LoginResultDetails();
        ResultDetails resultDetails = new ResultDetails();
        resultDetails.setStatus(HttpStatus.OK.value());
        resultDetails.setMessage("登陸成功！");
        resultDetails.setSuccess(true);
        resultDetails.setTimestamp(LocalDateTime.now());
        User user = new User();
        user.setUsername(authResult.getName());
        user.setPower(stringBuffer.toString());
        user.setExpirationTime(System.currentTimeMillis() + expirationTime);

        loginResultDetails.setResultDetails(resultDetails);
        loginResultDetails.setUser(user);
        loginResultDetails.setStatus(200);
        response.setContentType("application/json; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.write(new ObjectMapper().writeValueAsString(loginResultDetails));
        out.flush();
        out.close();
    }

    /**
     * 對請求的驗證
     * */
    public static Authentication getAuthentication(HttpServletRequest request) {

        Cookie cookie = WebUtils.getCookie(request, COOKIE_TOKEN);
        String token = cookie != null ? cookie.getValue() : null;

        if (token != null) {
            Claims claims = Jwts.parser()
                    .setSigningKey(SECRET_KEY)
                    .parseClaimsJws(token)
                    .getBody();

            // 獲取使用者許可權
            Collection<? extends GrantedAuthority> authorities =
                    Arrays.stream(claims.get("authorities").toString().split(","))
                            .map(SimpleGrantedAuthority::new)
                            .collect(Collectors.toList());

            String userName = claims.getSubject();
            if (userName != null) {
                UsernamePasswordAuthenticationToken usernamePasswordAuthenticationToken = new UsernamePasswordAuthenticationToken(userName, null, authorities);
                usernamePasswordAuthenticationToken.setDetails(claims);
                return usernamePasswordAuthenticationToken;
            }
            return null;
        }
        return null;
    }
}

1. addAuthentication 方法負責返回登陸成功的資訊，使用 HTTP Only 的 Cookie 可以有效防止 XSS 攻擊。

2. 登陸成功後返回使用者的許可權，使用者名稱，登陸過期時間，可以有效的幫助前端構建合適的使用者介面。

3. getAuthentication 方法負責對使用者的其它請求進行驗證，如果使用者的 JWT 解析正確，則向 Spring Security 返回 usernamePasswordAuthenticationToken 使用者名稱密碼驗證令牌，告訴 Spring Security 使用者所擁有的許可權，並放到當前的 Context 中，然後執行過濾鏈使請求繼續執行下去。

至此，我們的基本登陸與驗證所需要的方法就寫完了

ps：其中的 LoginResultDetails 類和 ResultDetails 請看專案原始碼，篇幅所限，此處不在贅述。

JWT 過濾器配置

眾所周知，Spring Security 是藉助一系列的 Servlet Filter 來來實現提供各種安全功能的，所以我們要使用 JWT 就需要自己實現兩個和 JWT 有關的過濾器

1. 一個是使用者登入的過濾器，在使用者的登入的過濾器中校驗使用者是否登入成功，如果登入成功，則生成一個 token 返回給客戶端，登入失敗則給前端一個登入失敗的提示。

2. 第二個過濾器則是當其他請求傳送來，校驗 token 的過濾器，如果校驗成功，就讓請求繼續執行。

這兩個過濾器，我們分別來看，先看第一個：

在專案下新建一個包，名為 filter， 在 filter 下新建一個類名為 JwtLoginFilter,並使其繼承 AbstractAuthenticationProcessingFilter 類，這個類是一個基於瀏覽器的基於 HTTP 的身份驗證請求的抽象處理器。

public class JwtLoginFilter extends AbstractAuthenticationProcessingFilter {
    private final VerifyCodeService verifyCodeService;

    private final LoginCountService loginCountService;

    /**
     * @param defaultFilterProcessesUrl 配置要過濾的地址，即登陸地址
     * @param authenticationManager 認證管理器，校驗身份時會用到
     * @param loginCountService */
    public JwtLoginFilter(String defaultFilterProcessesUrl, AuthenticationManager authenticationManager,
                          VerifyCodeService verifyCodeService, LoginCountService loginCountService) {
        super(new AntPathRequestMatcher(defaultFilterProcessesUrl));
        this.loginCountService = loginCountService;
        // 為 AbstractAuthenticationProcessingFilter 中的屬性賦值
        setAuthenticationManager(authenticationManager);
        this.verifyCodeService = verifyCodeService;
    }



    /**
     * 提取使用者賬號密碼進行驗證
     * */
    @Override
    public Authentication attemptAuthentication(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws AuthenticationException, IOException, ServletException {
        // 判斷是否要丟擲 登陸請求過快的異常
        loginCountService.judgeLoginCount(httpServletRequest);
        // 獲取 User 物件
        // readValue 第一個引數 輸入流，第二個引數 要轉換的物件
        User user = new ObjectMapper().readValue(httpServletRequest.getInputStream(), User.class);
        // 驗證碼驗證
        verifyCodeService.verify(httpServletRequest.getSession().getId(), user.getVerifyCode());
        // 對 html 標籤進行轉義，防止 XSS 攻擊
        String username = user.getUsername();
        username = HtmlUtils.htmlEscape(username);
        UsernamePasswordAuthenticationToken token = new UsernamePasswordAuthenticationToken(
                username,
                user.getPassword(),
                user.getAuthorities()
        );
        // 新增驗證的附加資訊
        // 包括驗證碼資訊和是否記住我
        token.setDetails(new LoginDetails(user.getRememberMe(), user.getVerifyCode()));
        // 進行登陸驗證
        return getAuthenticationManager().authenticate(token);
    }

    /**
     * 登陸成功回撥
     * */
    @Override
    protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain chain, Authentication authResult) throws IOException, ServletException {
        loginCountService.cleanLoginCount(request);
        // 登陸成功
        TokenAuthenticationHelper.addAuthentication(request, response ,authResult);
    }

    /**
     * 登陸失敗回撥
     * */
    @Override
    protected void unsuccessfulAuthentication(HttpServletRequest request, HttpServletResponse response, AuthenticationException failed) throws IOException, ServletException {
        // 錯誤請求次數加 1
        loginCountService.addLoginCount(request, 1);
        // 向前端寫入資料
        ErrorDetails errorDetails = new ErrorDetails();
        errorDetails.setStatus(HttpStatus.UNAUTHORIZED.value());
        errorDetails.setMessage("登陸失敗！");
        errorDetails.setError(failed.getLocalizedMessage());
        errorDetails.setTimestamp(LocalDateTime.now());
        errorDetails.setPath(request.getServletPath());
        response.setContentType("application/json; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.write(new ObjectMapper().writeValueAsString(errorDetails));
        out.flush();
        out.close();
    }
}

這個類主要有以下幾個作用

1. 自定義 JwtLoginFilter 繼承自 AbstractAuthenticationProcessingFilter，並實現其中的三個預設方法，其中的 defaultFilterProcessesUrl 變數就是我們需要設定的登陸路徑

2. attemptAuthentication 方法中，我們從登入引數中提取出使用者名稱密碼，然後呼叫 AuthenticationManager.authenticate()方法去進行自動校驗。

3. 第二步如果校驗成功，就會來到 successfulAuthentication 回撥中，在 successfulAuthentication 方法中，使用之前已經寫好的 addAuthentication 來生成 token，並使用 Http Only 的 cookie 寫出到客戶端。

4. 第二步如果校驗失敗就會來到 unsuccessfulAuthentication 方法中，在這個方法中返回一個錯誤提示給客戶端即可。

ps：其中的 verifyCodeService 與 loginCountService 方法與本文關係不大，其中的程式碼實現請看原始碼

唯一需要注意的就是

驗證碼異常需要繼承 AuthenticationException 異常，

可以看到這是一個 Spring Security 各種異常的父類，寫一個驗證碼異常類繼承 AuthenticationException，然後直接將驗證碼異常丟擲就好。

以下完整程式碼位於 com.bugaugaoshu.security.service.impl.DigitsVerifyCodeServiceImpl 類下

  @Override
    public void verify(String key, String code) {
        String lastVerifyCodeWithTimestamp = verifyCodeRepository.find(key);
        // 如果沒有驗證碼，則隨機生成一個
        if (lastVerifyCodeWithTimestamp == null) {
            lastVerifyCodeWithTimestamp = appendTimestamp(randomDigitString(verifyCodeUtil.getLen()));
        }
        String[] lastVerifyCodeAndTimestamp = lastVerifyCodeWithTimestamp.split("#");
        String lastVerifyCode = lastVerifyCodeAndTimestamp[0];
        long timestamp = Long.parseLong(lastVerifyCodeAndTimestamp[1]);
        if (timestamp + VERIFY_CODE_EXPIRE_TIMEOUT < System.currentTimeMillis()) {
            throw new VerifyFailedException("驗證碼已過期！");
        } else if (!Objects.equals(code, lastVerifyCode)) {
            throw new VerifyFailedException("驗證碼錯誤！");
        }
    }

異常程式碼在　 com.bugaugaoshu.security.exception.VerifyFailedException　類下

第二個使用者過濾器

public class JwtAuthenticationFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        try {
            Authentication authentication = TokenAuthenticationHelper.getAuthentication(httpServletRequest);

            // 對用 token 獲取到的使用者進行校驗
            SecurityContextHolder.getContext().setAuthentication(authentication);
            filterChain.doFilter(httpServletRequest, httpServletResponse);
        } catch (ExpiredJwtException | UnsupportedJwtException | MalformedJwtException |
                SignatureException | IllegalArgumentException e) {
            httpServletResponse.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Token expired，登陸已過期");
        }
    }
}

這個就很簡單了，將拿到的使用者 Token 進行解析，如果正確，就將當前使用者加入到 SecurityContext 的上下文中，授予使用者許可權，否則返回 Token 過期的異常

Spring Security 配置

接下來我們來配置 Spring Security,程式碼如下：

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    public static String ADMIN = "ROLE_ADMIN";

    public static String USER = "ROLE_USER";

    private final VerifyCodeService verifyCodeService;

    private final LoginCountService loginCountService;

    /**
     * 開放訪問的請求
     */
    private final static String[] PERMIT_ALL_MAPPING = {
            "/api/hello",
            "/api/login",
            "/api/home",
            "/api/verifyImage",
            "/api/image/verify",
            "/images/**"
    };

    public WebSecurityConfig(VerifyCodeService verifyCodeService, LoginCountService loginCountService) {
        this.verifyCodeService = verifyCodeService;
        this.loginCountService = loginCountService;
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    /**
     * 跨域配置
     */
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        // 允許跨域訪問的 URL
        List<String> allowedOriginsUrl = new ArrayList<>();
        allowedOriginsUrl.add("http://localhost:8080");
        allowedOriginsUrl.add("http://127.0.0.1:8080");
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true);
        // 設定允許跨域訪問的 URL
        config.setAllowedOrigins(allowedOriginsUrl);
        config.addAllowedHeader("*");
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers(PERMIT_ALL_MAPPING)
                .permitAll()
                .antMatchers("/api/user/**", "/api/data", "/api/logout")
                // USER 和 ADMIN 都可以訪問
                .hasAnyAuthority(USER, ADMIN)
                .antMatchers("/api/admin/**")
                // 只有 ADMIN 才可以訪問
                .hasAnyAuthority(ADMIN)
                .anyRequest()
                .authenticated()
                .and()
                // 新增過濾器鏈,前一個引數過濾器， 後一個引數過濾器新增的地方
                // 登陸過濾器
                .addFilterBefore(new JwtLoginFilter("/api/login", authenticationManager(), verifyCodeService, loginCountService), UsernamePasswordAuthenticationFilter.class)
                // 請求過濾器
                .addFilterBefore(new JwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class)
                // 開啟跨域
                .cors()
                .and()
                // 開啟 csrf
                .csrf()
                // .disable();
                .ignoringAntMatchers(PERMIT_ALL_MAPPING)
                .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }

    @Override
    public void configure(WebSecurity web) throws Exception {
        super.configure(web);
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        // 在記憶體中寫入使用者資料
        auth.
                authenticationProvider(daoAuthenticationProvider());
                //.inMemoryAuthentication();
//                .withUser("user")
//                .password(passwordEncoder().encode("123456"))
//                .authorities("ROLE_USER")
//                .and()
//                .withUser("admin")
//                .password(passwordEncoder().encode("123456"))
//                .authorities("ROLE_ADMIN")
//                .and()
//                .withUser("block")
//                .password(passwordEncoder().encode("123456"))
//                .authorities("ROLE_USER")
//                .accountLocked(true);
    }

    @Bean
    public DaoAuthenticationProvider daoAuthenticationProvider() {

        DaoAuthenticationProvider provider = new DaoAuthenticationProvider();
        provider.setHideUserNotFoundExceptions(false);
        provider.setPasswordEncoder(passwordEncoder());
        provider.setUserDetailsService(new CustomUserDetailsService());
        return provider;
    }

以上程式碼的註釋很詳細，我就不多說了，重點說一下兩個地方一個是 csrf 的問題，另一個就是 inMemoryAuthentication 在記憶體中寫入使用者的部分。

首先說 csrf 的問題：我看了看網上有很多 Spring Security 的教程，都會將 .csrf()設定為 .disable() ,這種設定雖然方便，但是不夠安全，忽略了使用安全框架的初衷所以為了安全起見，我還是開啟了這個功能，順便學習一下如何使用 XSRF-TOKEN

因為這個專案是一個 Demo,不涉及資料庫部分，所以我選擇了在記憶體中直接寫入使用者，網上的向記憶體中寫入使用者如上程式碼註釋部分，這樣寫雖然簡單，但是有一些問題，在打個斷點我們就能知道種方式呼叫的是 Spring Security 的是 ProviderManager 這個方法，這種方法不方便我們丟擲入使用者名稱不存在或者其異常，它都會丟擲 Bad Credentials 異常，不會提示其它錯誤,如下圖所示。

Spring Security 為了安全考慮，會把所有的登陸異常全部歸結為 Bad Credentials 異常，所以為了能丟擲像使用者名稱不存在的這種異常，如果採用 Spring Security 預設的登陸方式的話,可以採用像GitHub專案Vhr裡的這種處理方式，但是因為這個專案使用 Jwt 替換掉了預設的登陸方式，想要實現詳細的異常資訊丟擲就比較複雜了，我找了好久也沒找到比較簡單且合適的方法。如果你有好的方法，歡迎分享。

最後我的解決方案是使用 Spring Security 的 DaoAuthenticationProvider 這個類來成為認證提供者，這個類實現了 AbstractUserDetailsAuthenticationProvider 這一個抽象的使用者詳細資訊身份驗證功能，檢視註釋我們可以知道 AbstractUserDetailsAuthenticationProvider 提供了 A base AuthenticationProvider that allows subclasses to override and work with UserDetails objects. The class is designed to respond to UsernamePasswordAuthenticationToken authentication requests.（允許子類重寫和使用 UserDetails 物件的基本身份驗證提供程式。該類旨在響應 UsernamePasswordAuthenticationToken 身份驗證請求。）

通過配置自定義的使用者查詢實現類，我們可以直接在 CustomUserDetailsService 裡丟擲沒有發現使用者名稱的異常，然後再設定 hideUserNotFoundExceptions 為 false 這樣就可以區別是密碼錯誤，還是使用者名稱不存在的錯誤了，

但是這種方式還是有一個問題，不能丟擲像賬戶被鎖定這種異常，理論上這種功能可以繼承 AbstractUserDetailsAuthenticationProvider 這個抽象類然後自己重寫的登陸方法來實現，我看了看好像比較複雜，一個 Demo 沒必要，我就放棄了。

另外據說安全資訊暴露的越少越好，所以暫時就先這樣吧。(算是給自己找個理由)

使用者查詢服務

public class CustomUserDetailsService implements UserDetailsService {
    private List<UserDetails> userList = new ArrayList<>();

    public CustomUserDetailsService() {
        PasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        UserDetails user = User.withUsername("user").password(passwordEncoder.encode("123456")).authorities(WebSecurityConfig.USER).build();
        UserDetails admin = User.withUsername("admin").password(passwordEncoder.encode("123456")).authorities(WebSecurityConfig.ADMIN).build();
        userList.add(user);
        userList.add(admin);
    }

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        for (UserDetails userDetails : userList) {
            if (userDetails.getUsername().equals(username)) {
                // 此處我嘗試過直接返回 user
                // 但是這樣的話，只有後臺服務啟動後第一次登陸會有效
                // 推出後第二次登陸會出現  Empty encoded password 的錯誤，導致無法登陸
                // 這樣寫就不會出現這種問題了
                // 因為在第一次驗證後，使用者的密碼會被清除，導致第二次登陸系統拿到的是空密碼
                // 所以需要new一個物件或將原物件複製一份
                // 這個解決方案來自 https://stackoverflow.com/questions/43007763/spring-security-encoded-password-gives-me-bad-credentials/43046195#43046195
                return new User(userDetails.getUsername(), userDetails.getPassword(), userDetails.getAuthorities());
            }
        }
        throw new UsernameNotFoundException("使用者名稱不存在，請檢查使用者名稱或註冊！");
    }
}

這部分就比較簡單了，唯一的注意點我在註釋中已經寫的很清楚了，當然你要是使用連線資料庫的話，這個問題就不存在了。

UserDetailsService 這個介面就是 Spring Security 為其它的資料訪問策略做支援的。

至此，一個基本的 Spring Security + JWT 登陸的後端就完成了，你可以寫幾個 controller 然後用 postman 測試功能了。

其它部分的程式碼因為比較簡單，你可以參照原始碼自行實現你需要的功能。

前端搭建

建立 Vue 專案的方式網上有很多，此處也不再贅述，我只說一點，過去 Vue 專案建立完成後，在專案目錄下會生成一個 config 資料夾，用來存放 vue 的配置，但現在預設建立的專案是不會生成這個資料夾的，需要你手動在專案根目錄下建立 vue.config.js 作為配置檔案。

此處請參考：Vue CLI 官方文件，配置參考部分

附：使用 Vue CIL 建立 Vue 專案

依賴包

前後端資料傳遞我使用了更為簡單的 fetch api, 當然你也可以選擇相容性更加好的 axios

Ui 為 ElementUI

為了獲取 XSRF-TOKEN，還需要 VueCookies

最後為了在專案的首頁展示介紹，我還引入了 mavonEditor，一個基於 vue 的 Markdown 外掛

引入以上包之後，你與要修改 src 目錄下的 main.js 檔案如下。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import mavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css';
import VueCookies from 'vue-cookies'
import axios from 'axios'

// 讓ajax攜帶cookie
axios.defaults.withCredentials=true;
// 註冊 axios 為全域性變數
Vue.prototype.$axios = axios
// 使用 vue cookie
Vue.use(VueCookies)
Vue.config.productionTip = false
// 使用 ElementUI 元件
Vue.use(ElementUI)
// markdown 解析編輯工具
Vue.use(mavonEditor)
// 後臺服務地址
Vue.prototype.SERVER_API_URL = "http://127.0.0.1:8088/api";


new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

前端跨域配置

在建立 vue.config.js 完成後，你需要在裡面輸入以下內容，用來完成 Vue 的跨域配置

module.exports = {
    // options...
    devServer: {
      proxy: {
          '/api': {
              target: 'http://127.0.0.1:8088',
              changeOrigin: true,
              ws: true,
              pathRewrite:{
                '^/api':'' 
             }
          }
      }
  }
}

一些注意事項

頁面設計這些沒有什麼可寫的了，需要注意的一點就是在對後端伺服器進行 POST，DELETE，PUT 等操作時，請在請求頭中帶上 "X-XSRF-TOKEN": this.$cookies.get('XSRF-TOKEN'),如果不帶，那麼哪怕你登陸了，後臺也會返回 403 異常的。

credentials: "include" 這句也不能少，這是攜帶 Cookie 所必須的語句。如果不加這一句，等於沒有攜帶 Cookie，也就等於沒有登陸了。

舉個例子：

　　　　　　　deleteItem(data) {
                fetch(this.SERVER_API_URL + "/admin/data/" + data.id, {
                    headers: {
                        "Content-Type": "application/json; charset=UTF-8",
                        "X-XSRF-TOKEN": this.$cookies.get('XSRF-TOKEN')
                    },
                    method: "DELETE",
                    credentials: "include"
                }).then(response => response.json())
                    .then(json => {
                        if (json.status === 200) {
                            this.systemDataList.splice(data.id, 1);
                            this.$message({
                                message: '刪除成功',
                                type: 'success'
                            });
                        } else {
                            window.console.log(json);
                            this.$message.error(json.message);
                        }
                    });
            },

暫時就先寫這些吧，如果你有什麼問題或者好的建議，歡迎在評論區提出。

參考文件

Spring Security Reference

Vue.js

依賴工具

mavonEditor

element ui

&n