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 */@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單點登錄了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。