现在的位置: 首页 > 编程语言 > 正文

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

2020年02月14日 编程语言 ⁄ 共 5581字 ⁄ 字号 评论关闭

本文实例为大家分享了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 */@Configurationpublic 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 */@Controllerpublic 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 */@Controllerpublic 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> <p 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> </p> <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>

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

本文标题: 使用springboot结合vue实现sso单点登录

以上就上有关使用springboot结合vue实现sso单点登录的全部内容,学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。

抱歉!评论已关闭.