蓝缘基础框架项目-登录授权

今天看下登录的情况：

首先页面元素代码如下：

<div class="login">
    <div class="box png">
    <div class="logo png"></div>
    <div class="input">
      <div class="log">
      <form id="loginForm" name="loginForm" method="post" action="${pageContext.servletContext.contextPath }/login.html">
        <div class="name">
          <label>用户名</label><input type="text" class="text" id="username" placeholder="用户名" name="username" tabindex="1">
        </div>
        <div class="pwd">
          <label>密　码</label><input type="password" class="text" id="password" placeholder="密码" name="password" tabindex="2">
          <input type="button" class="submit" tabindex="3" value="登录" onclick="checkUserForm();">
          <div class="check"></div>
        </div>
        <div class="tip"></div>
        </form>
      </div>
    </div>
  </div>
    <div class="air-balloon ab-1 png"></div>
  <div class="air-balloon ab-2 png"></div>
    <div class="footer"></div>
</div>

说明：

1、点击登录按钮，触发checkUserForm 验证表单事件。

2、当表单验证成功后才进行登录，调用后端登录接口。

3、表单验证内容：判断用户名或密码是否为空。

function checkUserForm() {
  var userName = $("#username").val();
  var userPassword = $("#password").val();
  if (userName == "" || userPassword == "") {
    alert("用户名或密码不能为空");
    return false;
  }
  document.loginForm.submit();
}

4、为了显示调用登录后的结果，在初始化页面的时候判断错误信息是否为空，若不为空，则弹出错误提示信息。

$(function(){
    var error =  "${error}";
    if (error != ''){
         alert(error);
    }
 })

后端登录接口逻辑：

@RequestMapping(value = "login",method = {RequestMethod.POST})
    public String login(String username, String password, HttpServletRequest request) throws Exception {
        try {
            if (Common.isEmpty(username) || Common.isEmpty(password)) {
                request.setAttribute("error", "用户名或密码不能为空");
                return Common.BACKGROUND_PATH + "/framework/login";
            }

            Account account = new Account();
            account.setAccountName(username);
            account.setPassword(Md5Tool.getMd5(password));
            // 验证用户账号与密码是否正确
            Account users = accountService.countAccount(account);
            if (users == null) {
                request.setAttribute("error", "用户或密码不正确");
                return Common.BACKGROUND_PATH + "/framework/login";
            }

            Authentication authentication = myAuthenticationManager
                    .authenticate(new UsernamePasswordAuthenticationToken(username, users.getPassword()));
            SecurityContext securityContext = SecurityContextHolder.getContext();
            securityContext.setAuthentication(authentication);

            request.getSession().setAttribute(Common.SPRING_SECURITY_CONTEXT, securityContext);
            // 当验证都通过后，把用户信息放在session里
            request.getSession().setAttribute(Common.USER_SESSION, users);
            request.getSession().setAttribute(Common.USER_SESSION_ID, users.getId());

            String userName = users.getAccountName();
            String ip = Common.toIpAddr(request);

            UserLogin userLogin = new UserLogin();
            userLogin.setUserId(users.getId());
            userLogin.setUserName(userName);
            userLogin.setloginIP(ip);
            userLoginService.add(userLogin);

            request.removeAttribute("error");
        } catch (AuthenticationException ae) {
            logger.error(ae.getMessage());
            request.setAttribute("error", "登录异常，请联系管理员");
            return Common.BACKGROUND_PATH + "/framework/login";
        }
        return "redirect:index.html";
    }

说明：

1、调用登录接口，表单处理post请求。首先判断上送用户名或密码不能为空。

2、对密码进行md5加密，通过用户名和密码查询是否存在该用户。

3、springsecurity进行授权认证。

4、用户信息保存到session。

5、记录用户的登录日志表，并移除错误信息，转发进入系统主页面。

6、若发生错误则设置错误信息，跳转到登录页。

7、对于get请求，直接跳转到登录页面。

@RequestMapping(value = "login", method = {RequestMethod.GET})
    public String login(){
        return Common.BACKGROUND_PATH + "/framework/login";
    }

软件定制及其他业务

请加微信号：13128600812

公众号: