提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

项目系统分布式分布式 登录 电商 19 运营商
2023-09-11 14:15:41 时间

代码已上传至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">登&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>

相关文章