RuoYi-Vue前後端分離版內建cas

RuoYi-Vue內建cas

• 內建步驟
• • 一、後端配置
  • • 1、添加cas依賴
    • 2、修改配置檔案
    • 3、修改LoginUser.java
    • 4、修改Constants.java
    • 5、添加 CasProperties.java
    • 6、添加CasUserDetailsService.java
    • 7、添加CasAuthenticationSuccessHandler.java
    • 8、修改SecurityConfig
    • 9、啟動後端
  • 二、前端配置
  • • 1、修改settings.js
    • 2、修改permission.js
    • 3、修改request.js、Navbar.vue
    • 4、修改user.js
    • 5、啟動前端
    • 6、關閉cas

RuoYi-Vue v3.6.0版本內建cas。

實際項目中的內建方式。

可在自定義登入和cas登入自由切換。

完整demo代碼已上傳gitee： RuoYi-Vue內建cas

內建步驟

一、後端配置

1、添加cas依賴

在common子產品pom添加spring-security-cas依賴：

<!-- spring security cas-->
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-cas</artifactId>
</dependency>
           

2、修改配置檔案

在admin子產品下的application.yml配置檔案中添加：

#CAS
cas:
  server:
    host:
      #CAS服務位址
      url: http://localhost:8888/cas
      #CAS服務登入位址
      login_url: ${cas.server.host.url}/login
      #CAS服務登出位址
      logout_url: ${cas.server.host.url}/logout?service=${app.server.host.url}
# 應用通路位址
app:
  #開啟cas
  casEnable: true
  server:
    host:
      url: http://localhost:${server.port}
  #應用登入位址
  login_url: /
  #應用登出位址
  logout_url: /logout
  #前端登入位址
  web_url: http://localhost/index
           

3、修改LoginUser.java

由于CAS認證需要authorities屬性，此屬性不能為空，此處為了友善直接new HashSet():

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

4、修改Constants.java

添加CAS認證成功辨別：

/**
     * CAS登入成功後的背景辨別
     */
    public static final String CAS_TOKEN = "cas_token";

    /**
     * CAS登入成功後的前台Cookie的Key
     */
    public static final String WEB_TOKEN_KEY = "Admin-Token";
           

5、添加 CasProperties.java

讀取cas配置資訊：

package com.ruoyi.framework.config.properties;

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

/**
 * CAS的配置參數
 */
@Component
public class CasProperties {
	@Value("${cas.server.host.url}")
	private String casServerUrl;

	@Value("${cas.server.host.login_url}")
	private String casServerLoginUrl;

	@Value("${cas.server.host.logout_url}")
	private String casServerLogoutUrl;

	@Value("${app.casEnable}")
	private boolean casEnable;

	@Value("${app.server.host.url}")
	private String appServerUrl;

	@Value("${app.login_url}")
	private String appLoginUrl;

	@Value("${app.logout_url}")
	private String appLogoutUrl;

	@Value("${app.web_url}")
	private String webUrl;

	public String getWebUrl() {
		return webUrl;
	}

	public String getCasServerUrl() {
		return casServerUrl;
	}

	public void setCasServerUrl(String casServerUrl) {
		this.casServerUrl = casServerUrl;
	}

	public String getCasServerLoginUrl() {
		return casServerLoginUrl;
	}

	public void setCasServerLoginUrl(String casServerLoginUrl) {
		this.casServerLoginUrl = casServerLoginUrl;
	}

	public String getCasServerLogoutUrl() {
		return casServerLogoutUrl;
	}

	public void setCasServerLogoutUrl(String casServerLogoutUrl) {
		this.casServerLogoutUrl = casServerLogoutUrl;
	}

	public boolean isCasEnable() {
		return casEnable;
	}

	public void setCasEnable(boolean casEnable) {
		this.casEnable = casEnable;
	}

	public String getAppServerUrl() {
		return appServerUrl;
	}

	public void setAppServerUrl(String appServerUrl) {
		this.appServerUrl = appServerUrl;
	}

	public String getAppLoginUrl() {
		return appLoginUrl;
	}

	public void setAppLoginUrl(String appLoginUrl) {
		this.appLoginUrl = appLoginUrl;
	}

	public String getAppLogoutUrl() {
		return appLogoutUrl;
	}

	public void setAppLogoutUrl(String appLogoutUrl) {
		this.appLogoutUrl = appLogoutUrl;
	}

}
           

6、添加CasUserDetailsService.java

在framework子產品下添加：

package com.ruoyi.framework.web.service;

import com.ruoyi.common.core.domain.entity.SysUser;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.common.enums.UserStatus;
import com.ruoyi.common.exception.ServiceException;
import com.ruoyi.common.utils.StringUtils;
import com.ruoyi.system.service.ISysUserService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.cas.authentication.CasAssertionAuthenticationToken;
import org.springframework.security.core.userdetails.AuthenticationUserDetailsService;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

/**
 * 用于加載使用者資訊 實作UserDetailsService接口，或者實作AuthenticationUserDetailsService接口
 */

@Service
public class CasUserDetailsService implements AuthenticationUserDetailsService<CasAssertionAuthenticationToken> {

	private static final Logger log = LoggerFactory.getLogger(UserDetailsServiceImpl.class);

	@Autowired
	private ISysUserService userService;

	@Autowired
	private SysPermissionService permissionService;

	@Override
	public UserDetails loadUserDetails(CasAssertionAuthenticationToken token) throws UsernameNotFoundException {
		String username = token.getName();
		SysUser user = userService.selectUserByUserName(username);
		if (StringUtils.isNull(user)) {
			log.info("登入使用者：{} 不存在.", username);
			throw new ServiceException("登入使用者：" + username + " 不存在");
		} else if (UserStatus.DELETED.getCode().equals(user.getDelFlag())) {
			log.info("登入使用者：{} 已被删除.", username);
			throw new ServiceException("對不起，您的賬号：" + username + " 已被删除");
		} else if (UserStatus.DISABLE.getCode().equals(user.getStatus())) {
			log.info("登入使用者：{} 已被停用.", username);
			throw new ServiceException("對不起，您的賬号：" + username + " 已停用");
		}

		return createLoginUser(user);
	}

	public UserDetails createLoginUser(SysUser user) {
		return new LoginUser(user.getUserId(), user.getDeptId(), user, permissionService.getMenuPermission(user));
	}
}
           

7、添加CasAuthenticationSuccessHandler.java

在framework子產品下添加：

package com.ruoyi.framework.security.handle;

import com.ruoyi.common.constant.Constants;
import com.ruoyi.common.core.domain.model.LoginUser;
import com.ruoyi.framework.config.properties.CasProperties;
import com.ruoyi.framework.web.service.TokenService;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.security.core.Authentication;
import org.springframework.security.web.authentication.SavedRequestAwareAuthenticationSuccessHandler;
import org.springframework.security.web.savedrequest.HttpSessionRequestCache;
import org.springframework.security.web.savedrequest.RequestCache;
import org.springframework.stereotype.Service;
import org.springframework.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;


@Service
public class CasAuthenticationSuccessHandler extends SavedRequestAwareAuthenticationSuccessHandler {

	protected final Log logger = LogFactory.getLog(this.getClass());

	private RequestCache requestCache = new HttpSessionRequestCache();

	@Autowired
	private TokenService tokenService;

	@Autowired
	private CasProperties casProperties;

	/**
	 * 令牌有效期（預設30分鐘）
	 */
	@Value("${token.expireTime}")
	private int expireTime;

	@Override
	public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,
										Authentication authentication) throws ServletException, IOException {
		String targetUrlParameter = getTargetUrlParameter();
		if (isAlwaysUseDefaultTargetUrl()
				|| (targetUrlParameter != null && StringUtils.hasText(request.getParameter(targetUrlParameter)))) {
			requestCache.removeRequest(request, response);
			super.onAuthenticationSuccess(request, response, authentication);
			return;
		}
		clearAuthenticationAttributes(request);
		LoginUser userDetails = (LoginUser) authentication.getPrincipal();
		String token = tokenService.createToken(userDetails);
		//往Cookie中設定token
		Cookie casCookie = new Cookie(Constants.WEB_TOKEN_KEY, token);
		casCookie.setMaxAge(expireTime * 60);
		response.addCookie(casCookie);
		//設定後端認證成功辨別
		HttpSession httpSession = request.getSession();
		httpSession.setAttribute(Constants.CAS_TOKEN, token);
		//登入成功後跳轉到前端登入頁面
		getRedirectStrategy().sendRedirect(request, response, casProperties.getWebUrl());
	}
}
           

8、修改SecurityConfig

添加cas的處理邏輯：

package com.ruoyi.framework.config;

import com.ruoyi.framework.config.properties.CasProperties;
import com.ruoyi.framework.security.handle.CasAuthenticationSuccessHandler;
import com.ruoyi.framework.web.service.CasUserDetailsService;
import org.jasig.cas.client.session.SingleSignOutFilter;
import org.jasig.cas.client.validation.Cas20ServiceTicketValidator;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.cas.ServiceProperties;
import org.springframework.security.cas.authentication.CasAuthenticationProvider;
import org.springframework.security.cas.web.CasAuthenticationEntryPoint;
import org.springframework.security.cas.web.CasAuthenticationFilter;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.http.SessionCreationPolicy;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
import org.springframework.security.web.authentication.logout.LogoutFilter;
import org.springframework.security.web.authentication.logout.SecurityContextLogoutHandler;
import org.springframework.web.filter.CorsFilter;
import com.ruoyi.framework.security.filter.JwtAuthenticationTokenFilter;
import com.ruoyi.framework.security.handle.AuthenticationEntryPointImpl;
import com.ruoyi.framework.security.handle.LogoutSuccessHandlerImpl;

/**
 * spring security配置
 * 
 * @author ruoyi
 */
@EnableGlobalMethodSecurity(prePostEnabled = true, securedEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter
{
    @Autowired
    private CasProperties casProperties;

    @Autowired
    private CasUserDetailsService customUserDetailsService;

    @Autowired
    private CasAuthenticationSuccessHandler casAuthenticationSuccessHandler;
    
    /**
     * 自定義使用者認證邏輯
     */
    @Autowired
    private UserDetailsService userDetailsService;

    /**
     * 認證失敗處理類
     */
    @Autowired
    private AuthenticationEntryPointImpl unauthorizedHandler;

    /**
     * 退出處理類
     */
    @Autowired
    private LogoutSuccessHandlerImpl logoutSuccessHandler;

    /**
     * token認證過濾器
     */
    @Autowired
    private JwtAuthenticationTokenFilter authenticationTokenFilter;

    /**
     * 跨域過濾器
     */
    @Autowired
    private CorsFilter corsFilter;


    /**
     * 解決 無法直接注入 AuthenticationManager
     *
     * @return
     * @throws Exception
     */
    @Bean
    @Override
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }

    /**
     * anyRequest          |   比對所有請求路徑
     * access              |   SpringEl表達式結果為true時可以通路
     * anonymous           |   匿名可以通路
     * denyAll             |   使用者不能通路
     * fullyAuthenticated  |   使用者完全認證可以通路（非remember-me下自動登入）
     * hasAnyAuthority     |   如果有參數，參數表示權限，則其中任何一個權限可以通路
     * hasAnyRole          |   如果有參數，參數表示角色，則其中任何一個角色可以通路
     * hasAuthority        |   如果有參數，參數表示權限，則其權限可以通路
     * hasIpAddress        |   如果有參數，參數表示IP位址，如果使用者IP和參數比對，則可以通路
     * hasRole             |   如果有參數，參數表示角色，則其角色可以通路
     * permitAll           |   使用者可以任意通路
     * rememberMe          |   允許通過remember-me登入的使用者通路
     * authenticated       |   使用者登入後可通路
     */
    @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {

        if (!casProperties.isCasEnable()) {
            httpSecurity
                    // CSRF禁用，因為不使用session
                    .csrf().disable()
                    // 認證失敗處理類
                    .exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
                    // 基于token，是以不需要session
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                    // 過濾請求
                    .authorizeRequests()
                    // 對于登入login 注冊register 驗證碼captchaImage 允許匿名通路
                    .antMatchers("/login", "/register", "/captchaImage").anonymous()
                    .antMatchers(
                            HttpMethod.GET,
                            "/",
                            "/*.html",
                            "/**/*.html",
                            "/**/*.css",
                            "/**/*.js",
                            "/profile/**"
                    ).permitAll()
                    .antMatchers("/common/download**").anonymous()
                    .antMatchers("/common/download/resource**").anonymous()
                    .antMatchers("/swagger-ui.html").anonymous()
                    .antMatchers("/swagger-resources/**").anonymous()
                    .antMatchers("/webjars/**").anonymous()
                    .antMatchers("/*/api-docs").anonymous()
                    .antMatchers("/druid/**").anonymous()
                    .antMatchers("/websocket/**").anonymous()
                    .antMatchers("/magic/web/**").anonymous()
                    // 除上面外的所有請求全部需要鑒權認證
                    .anyRequest().authenticated()
                    .and()
                    .headers().frameOptions().disable();
            httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
            // 添加JWT filter
            httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
            // 添加CORS filter
            httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
            httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
        }

        //開啟cas
        if (casProperties.isCasEnable()) {
            httpSecurity
                    // CSRF禁用，因為不使用session
                    .csrf().disable()
                    // 基于token，是以不需要session
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                    // 過濾請求
                    .authorizeRequests()
                    // 對于登入login 驗證碼captchaImage 允許匿名通路
                    //.antMatchers("/login", "/captchaImage").anonymous()
                    .antMatchers(
                            HttpMethod.GET,
                            "/*.html",
                            "/**/*.html",
                            "/**/*.css",
                            "/**/*.js"
                    ).permitAll()
                    .antMatchers("/profile/**").anonymous()
                    .antMatchers("/common/download**").anonymous()
                    .antMatchers("/common/download/resource**").anonymous()
                    .antMatchers("/swagger-ui.html").anonymous()
                    .antMatchers("/swagger-resources/**").anonymous()
                    .antMatchers("/webjars/**").anonymous()
                    .antMatchers("/*/api-docs").anonymous()
                    .antMatchers("/druid/**").anonymous()
                    .antMatchers("/websocket/**").anonymous()
                    .antMatchers("/magic/web/**").anonymous()
                    // 除上面外的所有請求全部需要鑒權認證
                    .anyRequest().authenticated()
                    .and()
                    .headers().frameOptions().disable();
            //單點登入登出
            httpSecurity.logout().permitAll().logoutSuccessHandler(logoutSuccessHandler);
            // Custom JWT based security filter
            httpSecurity.addFilter(casAuthenticationFilter())
                    .addFilterBefore(authenticationTokenFilter, CasAuthenticationFilter.class)
                    //.addFilterBefore(casLogoutFilter(), LogoutFilter.class)
                    .addFilterBefore(singleSignOutFilter(), CasAuthenticationFilter.class).exceptionHandling()
                    //認證失敗
                    .authenticationEntryPoint(casAuthenticationEntryPoint());

            // 添加CORS filter
            httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
            httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
            // disable page caching
            httpSecurity.headers().cacheControl();
        }
    }

    /**
     * 強散列哈希加密實作
     */
    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }

    /**
     * 身份認證接口
     */
    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        if (!casProperties.isCasEnable()) {
            auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder());
        }
        // cas
        if (casProperties.isCasEnable()) {
            super.configure(auth);
            auth.authenticationProvider(casAuthenticationProvider());
        }
    }


    /**
     * 認證的入口
     */
    @Bean
    public CasAuthenticationEntryPoint casAuthenticationEntryPoint() {
        CasAuthenticationEntryPoint casAuthenticationEntryPoint = new CasAuthenticationEntryPoint();
        casAuthenticationEntryPoint.setLoginUrl(casProperties.getCasServerLoginUrl());
        casAuthenticationEntryPoint.setServiceProperties(serviceProperties());
        return casAuthenticationEntryPoint;
    }

    /**
     * 指定service相關資訊
     */
    @Bean
    public ServiceProperties serviceProperties() {
        ServiceProperties serviceProperties = new ServiceProperties();
        serviceProperties.setService(casProperties.getAppServerUrl() + casProperties.getAppLoginUrl());
        serviceProperties.setAuthenticateAllArtifacts(true);
        return serviceProperties;
    }

    /**
     * CAS認證過濾器
     */
    @Bean
    public CasAuthenticationFilter casAuthenticationFilter() throws Exception {
        CasAuthenticationFilter casAuthenticationFilter = new CasAuthenticationFilter();
        casAuthenticationFilter.setAuthenticationManager(authenticationManager());
        casAuthenticationFilter.setFilterProcessesUrl(casProperties.getAppLoginUrl());
        casAuthenticationFilter.setAuthenticationSuccessHandler(casAuthenticationSuccessHandler);
        return casAuthenticationFilter;
    }

    /**
     * cas 認證 Provider
     */
    @Bean
    public CasAuthenticationProvider casAuthenticationProvider() {
        CasAuthenticationProvider casAuthenticationProvider = new CasAuthenticationProvider();
        casAuthenticationProvider.setAuthenticationUserDetailsService(customUserDetailsService);
        casAuthenticationProvider.setServiceProperties(serviceProperties());
        casAuthenticationProvider.setTicketValidator(cas20ServiceTicketValidator());
        casAuthenticationProvider.setKey("casAuthenticationProviderKey");
        return casAuthenticationProvider;
    }

    @Bean
    public Cas20ServiceTicketValidator cas20ServiceTicketValidator() {
        return new Cas20ServiceTicketValidator(casProperties.getCasServerUrl());
    }

    /**
     * 單點登出過濾器
     */
    @Bean
    public SingleSignOutFilter singleSignOutFilter() {
        SingleSignOutFilter singleSignOutFilter = new SingleSignOutFilter();
        singleSignOutFilter.setCasServerUrlPrefix(casProperties.getCasServerUrl());
        singleSignOutFilter.setIgnoreInitConfiguration(true);
        return singleSignOutFilter;
    }

    /**
     * 請求單點退出過濾器
     */
    @Bean
    public LogoutFilter casLogoutFilter() {
        LogoutFilter logoutFilter = new LogoutFilter(casProperties.getCasServerLogoutUrl(),
                new SecurityContextLogoutHandler());
        logoutFilter.setFilterProcessesUrl(casProperties.getAppLogoutUrl());
        return logoutFilter;
    }
}
           

9、啟動後端

通路後端位址成功跳轉cas登入頁

完整代碼： RuoYi-Vue內建cas

二、前端配置

1、修改settings.js

添加cas登入和登出位址：

/**
     * 開啟cas
     */
    casEnable: true,

    /**
     * 單點登入url
     */
    casloginUrl: 'http://localhost:8888/cas/login?service=http://localhost:8080',

    /**
     * 單點登出url
     */
    caslogoutUrl: 'http://localhost:8888/cas/logout?service=http://localhost:8080',

           

2、修改permission.js

判斷沒有token時通路cas登入頁面：

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
const defaultSettings = require('@/settings.js')

router.beforeEach((to, from, next) => {
    NProgress.start()
    if (getToken()) {
        to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
            /* has token*/
        if (to.path === '/login') {
            next({ path: '/' })
            NProgress.done()
        } else {
            if (store.getters.roles.length === 0) {
                // 判斷目前使用者是否已拉取完user_info資訊
                store.dispatch('GetInfo').then(() => {
                    store.dispatch('GenerateRoutes').then(accessRoutes => {
                        // 根據roles權限生成可通路的路由表
                        router.addRoutes(accessRoutes) // 動态添加可通路路由表
                        next({...to, replace: true }) // hack方法 確定addRoutes已完成
                    })
                }).catch(err => {
                    store.dispatch('LogOut').then(() => {
                        Message.error(err)
                        next({ path: '/' })
                    })
                })
            } else {
                next()
            }
        }
    } else {
        // 沒有token
        if (whiteList.indexOf(to.path) !== -1) {
            // 在免登入白名單，直接進入
            next()
        } else {
            if (!defaultSettings.casEnable) {
                next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登入頁
            }
            //開啟cas
            if (defaultSettings.casEnable) {
                window.location.href = defaultSettings.casloginUrl // 否則全部重定向到登入頁
            }
            NProgress.done()
        }
    }
})

router.afterEach(() => {
    NProgress.done()
})

           

3、修改request.js、Navbar.vue

登出後不做響應：

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const defaultSettings = require('@/settings')

// 建立axios執行個體
const service = axios.create({
        // axios中請求配置有baseURL選項，表示請求URL公共部分
        baseURL: process.env.VUE_APP_BASE_API,
        // 逾時
        timeout: 10000
    })
    // request攔截器
service.interceptors.request.use(config => {
    // 是否需要設定 token
    const isToken = (config.headers || {}).isToken === false
    if (getToken() && !isToken) {
        config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶自定義token 請根據實際情況自行修改
    }
    // get請求映射params參數
    if (config.method === 'get' && config.params) {
        let url = config.url + '?';
        for (const propName of Object.keys(config.params)) {
            const value = config.params[propName];
            var part = encodeURIComponent(propName) + "=";
            if (value !== null && typeof(value) !== "undefined") {
                if (typeof value === 'object') {
                    for (const key of Object.keys(value)) {
                        if (value[key] !== null && typeof(value[key]) !== 'undefined') {
                            let params = propName + '[' + key + ']';
                            let subPart = encodeURIComponent(params) + '=';
                            url += subPart + encodeURIComponent(value[key]) + '&';
                        }
                    }
                } else {
                    url += part + encodeURIComponent(value) + "&";
                }
            }
        }
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    return config
}, error => {
    console.log(error)
    Promise.reject(error)
})

// 響應攔截器
service.interceptors.response.use(res => {
        // 未設定狀态碼則預設成功狀态
        const code = res.data.code || 200;
        // 擷取錯誤資訊
        const msg = errorCode[code] || res.data.msg || errorCode['default']
        if (code === 401) {
            MessageBox.confirm('登入狀态已過期，您可以繼續留在該頁面，或者重新登入', '系統提示', {
                confirmButtonText: '重新登入',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                store.dispatch('LogOut').then(() => {
                    if (!defaultSettings.casEnable) {
                        location.href = '/index';
                    }
                })
            }).catch(() => {});
            return Promise.reject('無效的會話，或者會話已過期，請重新登入。')
        } else if (code === 500) {
            Message({
                message: msg,
                type: 'error'
            })
            return Promise.reject(new Error(msg))
        } else if (code !== 200) {
            Notification.error({
                title: msg
            })
            return Promise.reject('error')
        } else {
            return res.data
        }
    },
    error => {
        console.log('err' + error)
        let { message } = error;
        if (message == "Network Error") {
            message = "後端接口連接配接異常";
        } else if (message.includes("timeout")) {
            message = "系統接口請求逾時";
        } else if (message.includes("Request failed with status code")) {
            message = "系統接口" + message.substr(message.length - 3) + "異常";
        }
        Message({
            message: message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

           

import { mapGetters } from "vuex";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";
import settings from "@/settings";

export default {
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
    },
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    async logout() {
      this.$confirm("确定登出并退出系統嗎？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            if (!settings.casEnable) {
              location.href = this.$router.options.base + "/index";
            }
          });
        })
        .catch(() => {});
    },
  },
};

           

4、修改user.js

登出後跳轉到cas登出頁面：

// 退出系統
        LogOut({ commit, state }) {
            return new Promise((resolve, reject) => {
                logout(state.token).then(() => {
                    commit('SET_TOKEN', '')
                    commit('SET_ROLES', [])
                    commit('SET_PERMISSIONS', [])
                    removeToken()
                    resolve()
                    window.location.href = defaultSettings.caslogoutUrl
                }).catch(error => {
                    reject(error)
                })
            })
        },

           

5、啟動前端

通路首頁跳轉登入頁，測試cas是否正常登入登出。

完整代碼： RuoYi-Vue內建cas

6、關閉cas

casEnable設定為false，則不啟用cas登入。

前後端配置casEnable需要保持一緻。