使用springboot结合vue实现sso单点登录

本文实例为大家分享了springboot vue实现sso单点登录的具体代码,供大家参考,具体内容如下

项目结构:

开发工具:idea, maven3
静态文件下载地址

1.pom文件:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.2.RELEASE</version>
 <relativePath/> <!-- lookup parent from repository -->
 </parent>
 <groupId>com.xicheng</groupId>
 <artifactId>ssodemo</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>ssodemo</name>
 <description>Demo project for Spring Boot</description>
 <properties>
 <java.version>1.8</java.version>
 </properties>
 <dependencies>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-test</artifactId>
  <scope>test</scope>
 </dependency>
 </dependencies>
 <build>
 <plugins>
  <plugin>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-maven-plugin</artifactId>
  </plugin>
 </plugins>
 </build>
</project>

2.MVC页面跳转配置类,如果请求直接跳转页面,采用该配置可以减少controller中代码的编写

package com.xicheng.ssodemo.common;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author xichengxml
 * @date 2019/2/13 16:56
 */
@Configuration
public class SpringMvcConfig implements WebMvcConfigurer {

  @Override
  public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("login").setViewName("login");
    registry.addViewController("success").setViewName("success");
    registry.addViewController("error").setViewName("error");
  }
}

3.核心校验类编写

package com.xicheng.ssodemo.common;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

/**
 * @author xichengxml
 * @date 2019/2/13 16:19
 * 登录校验工具类
 */
public class LoginCheck {

  /** 用户名 */
  private static final String USERNAME = "uname";
  /** 密码 */
  private static final String PASSWORD = "pwd";
  /** cookie键 */
  public static final String COOKIE_KEY = "sso";
  /** cookie值 */
  public static final String COOKIE_VAL = "ssocookie";

  /**
   * 校验用户名和密码
   * @param userName 登录用户名
   * @param password 登录密码
   * @return 成功返回true; 失败返回false
   */
  public static boolean checkLogin(String userName, String password) {
    return USERNAME.equals(userName) && PASSWORD.equals(password);
  }

  /**
   * 校验cookie
   * @param request
   * @return
   */
  public static boolean checkCookie(HttpServletRequest request) {
    Cookie[] cookies = request.getCookies();
    if (cookies != null && cookies.length != 0) {
      for (Cookie cookie : cookies) {
        if (COOKIE_KEY.equals(cookie.getName()) && COOKIE_VAL.equals(cookie.getValue())) {
          return true;
        }
      }
    }
    return false;
  }
}

4.核心登录controller编写

package com.xicheng.ssodemo.controller;

import com.xicheng.ssodemo.common.LoginCheck;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

/**
 * @author xichengxml
 * @date 2019/2/13 16:31
 */
@Controller
public class LoginController {

  /**
   * 登录成功后保存cookie在域下,返回登录成功页
   * @param uname
   * @param pwd
   * @param response
   * @return
   */
  @RequestMapping("/do-login")
  public String doLogin(String uname, String pwd, HttpServletResponse response) {
    if (LoginCheck.checkLogin(uname, pwd)) {
      Cookie cookie = new Cookie(LoginCheck.COOKIE_KEY, LoginCheck.COOKIE_VAL);
      cookie.setPath("/");
      response.addCookie(cookie);
      return "success";
    }
    return "error";
  }

}

5.登录controller编写

package com.xicheng.ssodemo.controller;

import com.xicheng.ssodemo.common.LoginCheck;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

/**
 * @author xichengxml
 * @date 2019/2/13 17:53
 */
@Controller
public class SameOriginController {

  /**
   * cookie存在,登录成功;否则返回登录页
   * @param request
   * @return
   */
  @RequestMapping("/login01")
  public String demo01(HttpServletRequest request) {
    return LoginCheck.checkCookie(request) ? "success" : "login";
  }

  @RequestMapping("/login02")
  public String demo02(HttpServletRequest request) {
    return LoginCheck.checkCookie(request) ? "success" : "login";
  }

}

6.登录页面及成功失败页面编写

<!-- login.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录</title>
  <script src="/js/vue.js" type="text/javascript"></script>
  <script src="/js/element.js" type="text/javascript"></script>
  <script src="/js/axios.min.js" type="text/javascript"></script>
  <link href="/css/element.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
</head>
<body>
  <div id="app">
    <el-input v-model="uname" placeholder="请输入用户名"></el-input>
    <el-input v-model="pwd" placeholder="请输入密码"></el-input>
    <el-button @click="submit" type="primary">登录</el-button>
  </div>

  <script>
    new Vue({
      el: "#app",
      data: {
        uname: '',
        pwd: ''
      },
      methods: {
        submit: function () {
          // 获取用户名和密码
          var uname = this.uname;
          var pwd = this.pwd;
          // 发送http请求
          axios.get("do-login", {params: {uname: uname, pwd: pwd}})
            .then(function (response) {
              if(response.status == 200) {
                location.href = "/success";
              } else {
                location.href = "/error";
              }
            })
            .catch(function (error) {
              alert("error--" + error);
            })
        }
      }
    });
  </script>
</body>
</html>
<!-- success.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>成功页面</title>
</head>
<body>
  This is success page!
</body>
</html>
<!-- error.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>错误页面</title>
</head>
<body>
  This is error page!
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-06-24

vue+springboot前后端分离实现单点登录跨域问题解决方法

最近在做一个后台管理系统,前端是用时下火热的vue.js,后台是基于springboot的.因为后台系统没有登录功能,但是公司要求统一登录,登录认证统一使用.net项目组的认证系统.那就意味着做单点登录咯,至于不知道什么是单点登录的同学,建议去找一下万能的度娘. 刚接到这个需求的时候,老夫心里便不屑的认为:区区登录何足挂齿,但是,开发的过程狠狠的打了我一巴掌(火辣辣的一巴掌)...,所以这次必须得好好记录一下这次教训,以免以后再踩这样的坑. 我面临的第一个问题是跨域,浏览器控制台直接报CORS,

基于springboot和redis实现单点登录

本文实例为大家分享了基于springboot和redis实现单点登录的具体代码,供大家参考,具体内容如下 1.具体的加密和解密方法 package com.example.demo.util; import com.google.common.base.Strings; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import javax.crypto.Cipher; import javax.crypto.KeyG

SpringBoot+Vue+Redis实现单点登录(一处登录另一处退出登录)

一.需求 实现用户在浏览器登录后,跳转到其他页面,当用户在其它地方又登录时,前面用户登录的页面退出登录(列如qq挤号那种方式) 二.实现思路 用户在前端填写用户信息登录后,后台接收数据先去数据库进行判断,如果登录成功,创建map集合,以用户id为键,token为值,先通过当前登录用户的id去获取token,如果token存在说明该用户已经登录过,调用redis以token为键删除上个用户的信息,调用方法生成新token,并将token存入map集合,将用户信息存入redis,并将token存入c

基于springboot实现整合shiro实现登录认证以及授权过程解析

这篇文章主要介绍了基于springboot实现整合shiro实现登录认证以及授权过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.添加shiro的依赖 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-spring-boot-web- starter</artifactId> <version&g

springboot集成CAS实现单点登录的示例代码

最近新参与的项目用到了cas单点登录,我还不会,这怎么能容忍!空了学习并搭建了一个spring-boot 集成CAS 的demo.实现了单点登录与登出. 单点登录英文全称是:Single Sign On,简称SSO. 含义:在多个相互信任的系统中,只要登录一个系统其他系统均可访问. CAS 是一种使用广泛的单点登录实现,分为客户端CAS Client和服务端 CAS Service,客户端就是我们的系统,服务端是认证中心,由CAS提供,我们需要稍作修改,启动起来就可以用.~~~~ 效果演示 ht

基于SpringBoot+Redis的Session共享与单点登录详解

前言 使用Redis来实现Session共享,其实网上已经有很多例子了,这是确保在集群部署中最典型的redis使用场景.在SpringBoot项目中,其实可以一行运行代码都不用写,只需要简单添加添加依赖和一行注解就可以实现(当然配置信息还是需要的). 然后简单地把该项目部署到不同的tomcat下,比如不同的端口(A.B),但项目访问路径是相同的.此时在A中使用set方法,然后在B中使用get方法,就可以发现B中可以获取A中设置的内容. 但如果就把这样的一个项目在多个tomcat中的部署说实现了单

spring boot如何基于JWT实现单点登录详解

前言 最近我们组要给负责的一个管理系统 A 集成另外一个系统 B,为了让用户使用更加便捷,避免多个系统重复登录,希望能够达到这样的效果--用户只需登录一次就能够在这两个系统中进行操作.很明显这就是单点登录(Single Sign-On)达到的效果,正好可以明目张胆的学一波单点登录知识. 本篇主要内容如下: SSO 介绍 SSO 的几种实现方式对比 基于 JWT 的 spring boot 单点登录实战 注意: SSO 这个概念已经出现很久很久了,目前各种平台都有非常成熟的实现,比如OpenSSO

golang 单点登录系统(go-sso)的实现

这是一个基于Go语言开发的单点登录系统,实现手机号注册.手机号+验证码登录.手机号+密码登录.账号登出等功能,用户认证采用cookie和jwt两种方式.收发短信相关方法已提供,仅需根据短信通道提供商提供的接口做相应的参数配置即可使用. 环境介绍 golang语言:go1.13.3+ . 数据库:mysql5.7 缓存:redis3.0 项目地址 https://github.com/guyan0319/go-sso 依赖包: github.com/dgrijalva/jwt-go github.

golang实现单点登录系统(go-sso)

这是一个基于Go语言开发的单点登录系统,实现手机号注册.手机号+验证码登录.手机号+密码登录.账号登出等功能,用户认证采用cookie和jwt两种方式.收发短信相关方法已提供,仅需根据短信通道提供商提供的接口做相应的参数配置即可使用. 环境介绍 golang语言:go1.13.3+ . 数据库:mysql5.7 缓存:redis3.0 项目地址 https://github.com/guyan0319/ ... 依赖包: github.com/dgrijalva/jwt-go github.co

springcloud微服务基于redis集群的单点登录实现解析

简介 本文介绍微服务架构中如何实现单点登录功能 创建三个服务: 操作redis集群的服务,用于多个服务之间共享数据 统一认证中心服务,用于整个系统的统一登录认证 服务消费者,用于测试单点登录 大体思路:每个服务都设置一个拦截器检查cookie中是否有token,若有token,则放行,若没有token,重定向到统一认证中心服务进行登录,登录成功后返回到被拦截的服务. 搭建redis集群服务 搭建redis集群参考文档 搭建统一认证中心 主函数添加注解 /** * 单点登录既要注册到服务注册中心,