19分布式电商项目 - 运营商系统登录与安全控制-CFANZ编程社区

代码已上传至Github

地址：https://github.com/ylw-github/pingyougou.git

版本号：9c0e45bedde7be8ba1e2e5b9e0c1b96fc52d506b

需求分析

完成运营商登陆功能

19分布式电商项目 - 运营商系统登录与安全控制_ide

登录功能的实现

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">登&nbsp;&nbsp;录</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>