SSO 基于token vue + element ui spring boot前端分离
一、项目启动
根据sql语句生成server库和客户端库
1.后端启动
配置修改:
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
username: username
password: password
url: jdbc:mysql://ip:port/spike_sso?autoReconnect=true&allowMultiQueries=true&useUnicode=true&characterEncoding=UTF8&useSSL=false&zeroDateTimeBehavior=convertToNull&serverTimezone=Asia/Shanghai
xxl:
sso:
redis:
address: redis://:password@ip:port/0
expire:
minute: 1440
server启动运行 SpikeSsoApplication.java
默认端口9090
client 启动运行 SpikeApplication.java
默认端口9091
2.前端nginx配置
二、项目详解
1.后端代码
XxlSsoConfig.java
import com.xxl.sso.core.conf.Conf;
import com.xxl.sso.core.filter.XxlSsoTokenFilter;
import com.xxl.sso.core.util.JedisUtil;
import org.springframework.beans.factory.DisposableBean;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* @author xuxueli 2018-11-15
*/
@Configuration
public class XxlSsoConfig implements DisposableBean {
@Value("${xxl.sso.server}")
private String xxlSsoServer;
@Value("${xxl.sso.logout.path}")
private String xxlSsoLogoutPath;
@Value("${xxl.sso.redis.address}")
private String xxlSsoRedisAddress;
@Value("${xxl-sso.excluded.paths}")
private String xxlSsoExcludedPaths;
@Bean
public FilterRegistrationBean xxlSsoFilterRegistration() {
// xxl-sso, redis init
JedisUtil.init(xxlSsoRedisAddress);
// xxl-sso, filter init
FilterRegistrationBean registration = new FilterRegistrationBean();
registration.setName("XxlSsoTokenFilter");
registration.setOrder(1);
registration.addUrlPatterns("/*");
registration.setFilter(new XxlSsoTokenFilter());
registration.addInitParameter(Conf.SSO_SERVER, xxlSsoServer);
registration.addInitParameter(Conf.SSO_LOGOUT_PATH, xxlSsoLogoutPath);
registration.addInitParameter(Conf.SSO_EXCLUDED_PATHS, xxlSsoExcludedPaths);
return registration;
}
@Override
public void destroy() throws Exception {
// xxl-sso, redis close
JedisUtil.close();
}
}
2.前端代码
axios 拦截器配置
配置 返回501跳转
import axios from "axios";
import { Message } from 'element-ui';
// 创建 axios 实例
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
let token = localStorage.getItem("token");
if (token != null && token != 'null') {
config.headers["xxl_sso_sessionid"] = token;
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
if (response.data.code == 501) {
window.location.href="/login";
}
return response;
}, function (error) {
let status = error.response.status;
if (403 == status) {
Message.error("未登录");
let returnUrl = localStorage.getItem("returnUrl");
// if (returnUrl != 'null') {
// window.location.href="/login?returnUrl="+returnUrl;
// }else {
window.location.href="/login";
// }
//this.$router.push("/");
}
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
export {axios as axios };
preLogin.vue处理跳转
let returnUrl = this.$route.query.returnUrl;
localStorage.removeItem("returnUrl");
if (returnUrl != undefined && returnUrl !=null && returnUrl != 'null') {
localStorage.setItem("returnUrl",returnUrl);
}
// 查看sso server是否登录,如果登录带着token返回
let token = localStorage.getItem("token");
if (token != 'null') {
// 校验登录
logincheck(token).then(res=>{
if (res.data.data != null) {
window.location.href=returnUrl+"?token="+token;
}else {
window.location.href="/login?returnUrl="+returnUrl;
}
}).catch((err) => {
})
.finally(() => {
});
} else {
window.location.href="/login?returnUrl="+returnUrl;
}
三、代码地址
注意事项:
客户端需要修改SSO 登录地址
在线demo
server: SSO SERVER
client: SPIKE SERVICE
github: https://github.com/katriina-tavi/spike
gitee: spike: 前端分离实现单点登录 vue element springboot xxl-sso实现