本文共 4824 字，大约阅读时间需要 16 分钟。
运营商系统登录与安全控制
2.1需求分析
完成运营商登陆功能
（1）、登录页面
（2）登录后页面
（3）、点击右上角头像后显示。
2.2登陆功能的实现
2.2.1配置文件
（1）修改mall-manager-web的pom.xml ，添加依赖
| <!-- 身份验证 --> <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-core</artifactId> </dependency> <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
| <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:spring/spring-security.xml</param-value> </context-param> <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener> <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）mall-manager-web的spring目录下添加配置文件spring-security.xml
| <!-- 以下页面不被拦截 --> <http pattern="/*.html" security="none"></http> <http pattern="/css/**" security="none"></http> <http pattern="/img/**" security="none"></http> <http pattern="/js/**" security="none"></http> <http pattern="/plugins/**" security="none"></http>
<!-- 页面拦截规则 --> <http use-expressions="false"> <intercept-url pattern="/*" access="ROLE_ADMIN" /> <form-login login-page="/login.html" default-target-url="/admin/index.html" authentication-failure-url="/login.html" always-use-default-target="true"/> <csrf disabled="true"/> <headers> <frame-options policy="SAMEORIGIN"/> </headers> </http>
<!-- 认证管理器 --> <authentication-manager> <authentication-provider> <user-service> <user name="admin" password="123" authorities="ROLE_ADMIN"/> <user name="sunwukong" password="dasheng" authorities="ROLE_ADMIN"/> </user-service> </authentication-provider> </authentication-manager> |
配置说明：
1.如果你在系统中使用了框架页，需要设置框架页的策略为SAMEORIGIN
| <headers> <frame-options policy="SAMEORIGIN"/> </headers> |
2.always-use-default-target：指定了是否在身份验证通过后总是跳转到default-target-url属性指定的URL。
2.2.2登录页面
修改mall-manager-web的 login.html
| <form id="loginform" action="/login" method="post" class="sui-form"> <div class="input-prepend"><span class="add-on loginname"></span> <input id="prependedInput" name="username" type="text" placeholder="邮箱/用户名/手机号" class="span2 input-xfat"> </div> <div class="input-prepend"><span class="add-on loginpwd"></span> <input id="prependedInput" name="password" type="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" οnclick="document:loginform.submit()" target="_blank">登 录</a> </div> </form> |
2.3主界面显示登陆名
2.3.1后端代码
在mall-manager-web新建LoginController.java
| package com.mall.manager.controller; import java.util.HashMap; import java.util.Map; import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.core.userdetails.UserDetails; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; @RestController @RequestMapping("/login") public class LoginController { @RequestMapping("name") public Map name(){ String name=SecurityContextHolder.getContext() .getAuthentication().getName(); Map map=new HashMap(); map.put("loginName", name); return map ; } } |
2.3.2前端代码
- 新建loginService.js
| //登陆服务层 app.service('loginService',function($http){ //读取登录人名称 this.loginName=function(){ return $http.get('../login/name.do'); } }); |
- 新建indexController.js
| app.controller('indexController' ,function($scope,$controller ,loginService){ //读取当前登录人 $scope.showLoginName=function(){ loginService.loginName().success( function(response){ $scope.loginName=response.loginName; } ); } }); |
（3）在页面admin/index.html引入JS
| <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script> <script type="text/javascript" src="../js/base.js"></script> <script type="text/javascript" src="../js/service/loginService.js"></script> <script type="text/javascript" src="../js/controller/indexController.js"></script> |
（4）添加指令
| <body class="hold-transition skin-green sidebar-mini" ng-app="mall" ng-controller="indexController" ng-init="showLoginName ()"> |
（5）将页面上的测试用户 替换成 { {loginName}}
2.4退出登录
（1）在mall-manager-web的spring-security.xml的http节点中添加配置
| <logout/> |
加此配置后，会自动的产生退出登录的地址/logout,如果你不想用这个地址 ，你也可以定义生成的退出地址以及跳转的页面，配置如下
| <logout logout-url="" logout-success-url=""/> |
logout-url:退出的地址，会自动生成
logout-success-url:退出后跳转的地址
（2）修改注销的链接
| <div class="pull-right"> <a href="../logout" class="btn btn-default btn-flat">注销</a> </div> |