前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >SSO 基于token vue + element ui spring boot前后端分离

SSO 基于token vue + element ui spring boot前后端分离

原创
作者头像
用户5371443
发布2022-09-15 09:44:49
5030
发布2022-09-15 09:44:49
举报
文章被收录于专栏:IT开发者

一、项目启动

根据sql语句生成server库和客户端库

1.后端启动

配置修改:

代码语言:javascript
复制
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Drive
    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

client 启动运行 SpikeApplication.java

2.前端nginx配置

代码语言:javascript
复制
upstream sso-api{
        server 127.0.0.1:6060 weight=1;
    }
 
    server {
        listen 8086;
        location / {
             root   /usr/share/nginx/spike-sso-ui/dist;
             index  index.html index.htm;
             try_files  $uri $uri/ /index.html;
 
        }
        location /sso {
            proxy_pass http://sso-api;
        }
         #location /api {
          #  proxy_pass http://127.0.0.1:9080;
        #}
    }
    server {
       listen 8087;
        location / {
             root   /usr/share/nginx/spike-ui/dist;
             index  index.html index.htm;
             try_files  $uri $uri/ /index.html;
        }
 
        location /api {
            proxy_pass http://127.0.0.1:9080;
        }
    }

二、项目详解

1.后端代码

XxlSsoConfig.java

代码语言:javascript
复制
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跳转

代码语言:javascript
复制
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处理跳转

代码语言:javascript
复制
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 用户名/密码 admin/123456

server: http://101.43.134.78:8086/

client: http://101.43.134.78:8087

github: https://github.com/katriina-tavi/spike

gitee: https://gitee.com/songhaisong/spike

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、项目启动
    • 1.后端启动
      • 2.前端nginx配置
      • 二、项目详解
        • 1.后端代码
          • 2.前端代码
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档