代码已上传至Github
地址：https://github.com/ylw-github/pingyougou.git
版本号：9c0e45bedde7be8ba1e2e5b9e0c1b96fc52d506b
需求分析
完成运营商登陆功能
登录功能的实现
1.配置文件
（1）修改 pinyougou-manager-web 的 pom.xml ，添加依赖：
<!-- 身份验证 --> <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-web</artifactId> </dependency> <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-config</artifactId> </dependency>
（2）修改 web.xml
<!-- spring security 安全控制过滤器 --> <!-- 使用过滤器拦截请求,对这些请求进行安全验证 --> <filter> <filter-name>springSecurityFilterChain</filter-name> <filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class> </filter> <filter-mapping> <filter-name>springSecurityFilterChain</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
（3）pinyougou-manager-web 的 spring 目录下添加配置文件 spring-security.xml
<?xml version="1.0" encoding="UTF-8"?> <bean:beans xmlns="http://www.springframework.org/schema/security" xmlns:bean="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security.xsd"> <!-- 在权限认证之前访问资源需要放行 --> <http pattern="/login.html" security="none"></http> <http pattern="/error.html" security="none"></http> <http pattern="/css/**" security="none"></http> <http pattern="/js/**" security="none"></http> <http pattern="/img/**" security="none"></http> <http pattern="/plugins/**" security="none"></http> <!-- http安全控制规则 --> <http> <intercept-url pattern="/**" access="hasRole('ROLE_USER')"/> <!-- 表单认证 --> <form-login login-page="/login.html" default-target-url="/admin/index.html" always-use-default-target="true" authentication-failure-url="/error.html" login-processing-url="/login"/> <!-- 屏蔽跨域 --> <csrf disabled="true"/> <!-- 配置ifram访问 --> <headers> <frame-options policy="SAMEORIGIN"/> </headers> <!-- 推出登录配置 --> <!-- logout: spring security 安全框架自动生成推出地址:/logout --> <logout logout-success-url="/login.html"/> </http> <!-- 配置认证管理器 --> <authentication-manager> <authentication-provider> <user-service> <user name="admin" password="admin" authorities="ROLE_USER"/> </user-service> </authentication-provider> </authentication-manager> </bean:beans>
2.登录页面
修改 pinyougou-manager-web 的 login.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>品优购运营商运营管理后台</title> <link rel="icon" href="../assets/img/favicon.ico"> <link rel="stylesheet" type="text/css" href="css/webbase.css" /> <link rel="stylesheet" type="text/css" href="css/pages-login-manage.css" /> </head> <body> <div class="loginmanage"> <div class="py-container"> <h4 class="manage-title">品优购运营商运营管理后台</h4> <div class="loginform"> <ul class="sui-nav nav-tabs tab-wraped"> <li> <a href="#index" data-toggle="tab"> <h3>扫描登录</h3> </a> </li> <li class="active"> <a href="#profile" data-toggle="tab"> <h3>账户登录</h3> </a> </li> </ul> <div class="tab-content tab-wraped"> <div id="index" class="tab-pane"> <p>二维码登录，暂为官网二维码</p> [外链图片转存失败(img-wC6kpJZs-1562142225697)(https://mp.csdn.net/img/wx_cz.jpg)] </div> <div id="profile" class="tab-pane active"> <form class="sui-form" id="loginform" action="/login" method="post"> <div class="input-prepend"><span class="add-on loginname"></span> <input id="prependedInput" type="text" name="username" placeholder="邮箱/用户名/手机号" class="span2 input-xfat"> </div> <div class="input-prepend"><span class="add-on loginpwd"></span> <input id="prependedInput" type="password" name="password" placeholder="请输入密码" class="span2 input-xfat"> </div> <div class="setting"> <div id="slider"> <div id="slider_bg"></div> <span id="label">>></span> <span id="labelTip">拖动滑块验证</span> </div> </div> <div class="logined"> <a class="sui-btn btn-block btn-xlarge btn-danger" href="javascript:void(0)" onclick="document:loginform.submit();" target="_blank">登 录</a> </div> </form> </div> </div> </div> <div class="clearfix"></div> </div> </div> <!--foot--> <div class="py-container copyright"> <ul> <li>关于我们</li> <li>联系我们</li> <li>联系客服</li> <li>商家入驻</li> <li>营销中心</li> <li>手机品优购</li> <li>销售联盟</li> <li>品优购社区</li> </ul> <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div> <div class="beian">京ICP备08001421号京公网安备110108007702 </div> </div> <script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script> <script type="text/javascript" src="js/plugins/sui/sui.min.js"></script> <script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script> <script src="js/pages/jquery.slideunlock.js"></script> <script> $(function(){ var slider = new SliderUnlock("#slider",{ successLabelTip : "欢迎访问品优购" },function(){ // alert("验证成功,即将跳转至首页"); // window.location.href="index.html" }); slider.init(); }) </script> </body> </html>
参照 login.html 创建 loginerror.html 页面
主页面显示登录人
1.后端代码
package com.pyg.manager.controller; import java.util.HashMap; import java.util.Map; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/login") public class LoginController { /** * 需求:获取当前用户的登录信息 */ @RequestMapping("/loadLoginName") public Map loadLoginName(){ //获取用户名 //使用安全框架获取用户登录名 String username = SecurityContextHolder.getContext().getAuthentication().getName(); //创建map对象 Map map = new HashMap(); //把用户名放入map map.put("loginName", username); return map; } }
2.前端代码
（1）新建 loginService.js
//抽取服务 app.service("loginService", function($http) { // 获取用户登录名 this.loadLoginName = function() { return $http.get("../login/loadLoginName"); }; });
（2）新建 loginController.js
//定义控制器 app.controller("loginController", function($scope,loginService) { //获取用户登录名 $scope.loadLoginName = function(){ //调用服务层方法 loginService.loadLoginName().success( function(data){ $scope.loginName = data.loginName; } ); }; });
页面上引入 JS , 用表达式显示（代码略）
退出登录
在 pinyougou-manager-web 的 spring-security.xml 的 http 节点中添加配置
<!-- 退出登录配置 --> <!-- logout: spring security 安全框架自动生成退出地址:/logout --> <logout logout-success-url="/login.html"/>
加此配置后，会自动的产生退出登录的地址/logout 。
logout-url: 退出的地址，会自动生成
logout-success-url: 退出后跳转的地址
修改注销的链接
<div class="pull-right"> <a href="../logout" class="btn btn-default btn-flat">注销</a> </div>
