注册、登录、退出登录

运营商系统登录与安全控制

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前端代码

1. 新建loginService.js

//登陆服务层 app.service('loginService',function($http){ //读取登录人名称 this.loginName=function(){ return $http.get('../login/name.do'); } });

1. 新建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>