使用springboot結合vue實現sso單點登錄
更新時間:2021年05月26日 16:33:23 作者:西城xml
這篇文章主要為大家詳細介紹了如何使用springboot+vue實現sso單點登錄,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了springboot vue實現sso單點登錄的具體代碼,供大家參考,具體內容如下
項目結構:
開發(fā)工具:idea, maven3
靜態(tài)文件下載地址
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; // 發(fā)送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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Spring Boot 項目做性能監(jiān)控的操作流程
這篇文章主要介紹了Spring Boot 項目如何做性能監(jiān)控,本文通過實例代碼圖文相結合給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07SpringBoot利用dynamic-datasource-spring-boot-starter解決多數據源問題
dynamic-datasource-spring-boot-starter 是一個用于在 Spring Boot 項目中實現動態(tài)數據源切換的工具,下面我們看看如何使用dynamic-datasource-spring-boot-starter解決多數據源問題吧2025-03-03Intellij無法創(chuàng)建java文件解決方案
這篇文章主要介紹了Intellij無法創(chuàng)建java文件解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10