Web流行框架SSM+Shiro+Bootstrap+Jquery專案實踐之使用者登陸
阿新 • • 發佈：2019-02-09
早在一年前，我就想著自己要寫一個完整的Web專案出來，然後開源，供所有的Web開發者探討當下網際網路企業流行的技術，可是由於種種原因未能付諸實踐，所以在新的一年，我要堅持下去，從現在開始，利用休息時間建立這個系統。這個專案的目的不是為了盲目追求技術，而是能快速、優雅地解決現實中的實際需求，希望廣大Web愛好者和我共同實現這個目標。
我沒有寫前端頁面的基礎，所以參考了一個比較成熟的框架AdminLTE，裡面介面做的非常好。登陸介面很簡單，就是一個form表單。
我沒有直接使用form的action+submit去提交這個表單，而是採用手動點選普通按鈕button去觸發login()。是的，一個<form action="##" method="post" onsubmit="return false" role="form" id="login-form"> <div class="form-group has-feedback"> <input type="text" class="form-control" name="username" placeholder="請輸入登入郵箱/手機號/使用者名稱"> <span class="glyphicon glyphicon-envelope form-control-feedback"></span> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" name="password" placeholder="請輸入密碼"> <span class="glyphicon glyphicon-lock form-control-feedback"></span> </div> <div class="row"> <div class="col-xs-6"> <div class="checkbox icheck"> <label> <input type="checkbox" name="rememberMe"> 記住使用者 </label> </div> </div> <!-- /.col --> <div class="col-xs-6"> <div class="checkbox pull-right"> <a href="#">忘記密碼</a> <span> / </span> <a href="${basePath}/register" class="text-center">註冊</a> </div> </div> <!-- /.col --> </div> <div class="row"> <div class="col-xs-12"> <button type="button" class="btn btn-danger btn-block btn-flat" onclick="javascript:login();">登 錄</button> </div> </div> </form>
JavaScript函式來做這個提交動作，目的就是為了適應現實專案中實際需求，因為很多表單提交前的驗證要放在action之前做。所以這裡要引入一個之前寫好的login.js
按鈕中click事件觸發的就是上面的login()函式。剛才有提到的表單欄位驗證功能，我這裡用到了一個非常流行、非常好用的驗證外掛:bootstrap-validator.js，在使用前，需要對它初始化驗證配置，即我們要驗證哪些欄位，驗證規則是什麼，這裡直接上程式碼。function login() { // 獲取表單物件 var bootstrapValidator = $('#login-form').data('bootstrapValidator'); // 驗證表單 bootstrapValidator.validate(); // 是否通過了驗證 if (!$('#login-form').data('bootstrapValidator').isValid()) { return; } var data = $('#login-form').serializeJSON(); console.log(data); $.ajax({ type : "POST", dataType : "json", contentType : "application/json;charset=utf-8", url : "/login", data : JSON.stringify(data),// 這裡要傳json字串 success : function(result) { if (result.status == 200) { var resultdata = result.data; if (resultdata) { // 儲存臨時的cookie setCookie("username", resultdata.username); setCookie("rolename", resultdata.rolename); // 如果點選了記住我，那麼存入localstorage rememberMe($("input[name='rememberMe']").is(":checked")); } // 跳轉主頁 window.location.href = "/"; } else { new LoginValidator({ code:result.status, message:result.msg, username:$("input[name='username']").val(), password:$("input[name='password']").val() }); } }, error : function() { alert("異常！"); } }); } function LoginValidator(config) { this.code = config.code; this.message = config.message; this.userName = config.username; this.password = config.password; this.initValidator(); } // 0 未授權 1 賬號問題 2 密碼錯誤 3 賬號密碼錯誤 LoginValidator.prototype.initValidator = function() { if (!this.code) return; if (this.code == 0) { this.addPasswordErrorMsg(); } else if (this.code == 1) { this.addUserNameErrorStyle(); this.addUserNameErrorMsg(); } else if (this.code == 2) { this.addPasswordErrorStyle(); this.addPasswordErrorMsg(); } else if (this.code == 3) { this.addUserNameErrorStyle(); this.addPasswordErrorStyle(); this.addPasswordErrorMsg(); } return; } LoginValidator.prototype.addUserNameErrorStyle = function() { this.addErrorStyle('username'); } LoginValidator.prototype.addPasswordErrorStyle = function() { this.addErrorStyle('password'); } LoginValidator.prototype.addUserNameErrorMsg = function() { this.addErrorMsg('username'); } LoginValidator.prototype.addPasswordErrorMsg = function() { this.addErrorMsg('password'); } LoginValidator.prototype.addErrorMsg = function(field) { // 清除掉之前的提示內容 $("input[name='" + field + "']").parent().children('small').remove(); // 更新錯誤提示資訊 $("input[name='" + field + "']").parent().append( '<small data-bv-validator="notEmpty" data-bv-validator-for="' + field + '" class="help-block">' + this.message + '</small>'); } LoginValidator.prototype.addErrorStyle = function(field) { $("input[name='" + field + "']").parent().addClass("has-error"); } // 使用本地快取記住使用者名稱密碼 function rememberMe(rm_flag) { // remember me if (rm_flag) { localStorage.username = $("input[name='username']").val(); localStorage.password = $("input[name='password']").val(); localStorage.rememberMe = 1; } // delete remember msg else { localStorage.userName = null; localStorage.password = null; localStorage.rememberMe = 0; } } // 記住回填 function fillbackLoginForm() { if (localStorage.rememberMe && localStorage.rememberMe == "1") { $("input[name='username']").val(localStorage.username); $("input[name='password']").val(localStorage.password); $("input[name='rememberMe']").iCheck('check'); $("input[name='rememberMe']").iCheck('update'); } }
// 初始化驗證配置 $("#login-form").bootstrapValidator({ message : '請輸入使用者名稱/密碼', fields : { username : { validators : { notEmpty : { message : '登入郵箱、手機號、使用者名稱不能為空' } } }, password : { validators : { notEmpty : { message : '密碼不能為空' } } } } });
這段程式碼是直接寫在login.jsp這個頁面body中的，頁面載入完成後就會初始化它，後面考慮把它單獨拿出來。實際
中的驗證肯定不止上面的欄位值是否為空，這裡我們慢慢來，登陸錯誤的提示包含很多方面的知識，前端錯誤提示的
動態變換我們還是用bootstrap-validator.js來做，程式碼也在上面login.js中，我封裝好了，主要看後臺。
依賴jar:這裡貼出pom.xml，順便說一句，在以後的章節中我可能會詳細的講述如何構建一個標準的maven聚合工程
（標準的大型電商專案開發結構），我這裡就不多說了。
parent:
<!-- 集中定義依賴版本號 -->
<properties>
<shiro.version>1.4.0</shiro.version>
</properties>
<dependencyManagement>
<dependencies>
<!-- shiro許可權框架 -->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-core</artifactId>
<version>${shiro.version}</version>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-web</artifactId>
<version>${shiro.version}</version>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring</artifactId>
<version>${shiro.version}</version>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-ehcache</artifactId>
<version>${shiro.version}</version>
</dependency>
</dependencies>
</dependencyManagement><!-- shiro許可權框架 -->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-core</artifactId>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-web</artifactId>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring</artifactId>
</dependency>
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-ehcache</artifactId>
</dependency>
apache shiro是現在很流行、很棒的許可權框架，包括完整的登陸驗證、許可權管理，與spring完美整合，簡單易懂的api，
很適合快速開發。首先在web.xml新增它的攔截器，攔截所有（“/*”）的請求。
<!-- shiro的filter -->
<filter>
<filter-name>shiroFilter</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
<init-param>
<param-name>targetFilterLifecycle</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>targetBeanName</param-name>
<param-value>shiroFilter</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>shiroFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping><!-- 啟用shrio授權註解攔截方式 -->
<bean id="shiroFilter" class="org.apache.shiro.spring.web.ShiroFilterFactoryBean">
<!-- 裝配 securityManager -->
<property name="securityManager" ref="securityManager" />
<!-- 配置登陸頁面 -->
<property name="loginUrl" value="/openlogin" />
<!-- 許可權認證成功跳轉的介面 -->
<property name="successUrl" value="/" />
<!-- 沒有認證許可權的介面 -->
<property name="unauthorizedUrl" value="/unauthorized" />
<!-- 具體配置需要攔截哪些 URL, 以及訪問對應的 URL 時使用 Shiro 的什麼 Filter 進行攔截. -->
<property name="filterChainDefinitions">
<value>
/css/** = anon
/js/** = anon
/login = anon
/** = authc
</value>
</property>
</bean>
<!-- 配置快取管理器 -->
<!-- <bean id="cacheManager" class="org.apache.shiro.cache.ehcache.EhCacheManager">
指定 ehcache 的配置檔案
<property name="cacheManagerConfigFile" value="classpath:ehcache-shiro.xml" />
</bean> -->
<!-- 配置進行授權和認證的 Realm -->
<bean id="myRealm" class="com.taotao.shiro.ShiroDBRealm">
</bean>
<!-- 配置 Shiro 的 SecurityManager Bean. -->
<bean id="securityManager" class="org.apache.shiro.web.mgt.DefaultWebSecurityManager">
<property name="realm" ref="myRealm" />
</bean>
<!-- 配置 Bean 後置處理器: 會自動的呼叫和 Spring 整合後各個元件的生命週期方法. -->
<bean id="lifecycleBeanPostProcessor" class="org.apache.shiro.spring.LifecycleBeanPostProcessor" />public class ShiroDBRealm extends AuthorizingRealm {
private static final String SESSION_USER_KEY = "taotao";
@Autowired
private UserService userService;
@Override
protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
SimpleAuthorizationInfo info = new SimpleAuthorizationInfo();
return info;
}
@Override
protected AuthenticationInfo doGetAuthenticationInfo(
AuthenticationToken authcToken) throws AuthenticationException {
// 把token轉換成User物件
TbUser userLogin = tokenToUser((UsernamePasswordToken) authcToken);
// 驗證使用者是否可以登入
TbUser ui = userService.login(userLogin);
if(ui == null){
throw new UnknownAccountException(); // 異常處理，找不到資料
}
// 設定session
Session session = SecurityUtils.getSubject().getSession();
session.setAttribute(SESSION_USER_KEY, ui);
//設定session有效時間5分鐘
session.setTimeout(300000);
//當前 Realm 的 name
String realmName = this.getName();
//登陸的主要資訊: 可以是一個實體類的物件, 但該實體類的物件一定是根據 token 的 username 查詢得到的.
Object principal = authcToken.getPrincipal();
return new SimpleAuthenticationInfo(principal, ui.getPassword(), realmName);
}
private TbUser tokenToUser(UsernamePasswordToken authcToken) {
TbUser user = new TbUser();
user.setUsername(authcToken.getUsername());
user.setPassword(String.valueOf(authcToken.getPassword()));
return user;
}
}
注入的service：
包含service介面和service實現類
UserService.java
public interface UserService {
public TbUser login(TbUser user);
}UserServiceImpl.java
@Service
public class UserServiceImpl implements UserService {
@Autowired
private TbUserMapper tbUserMapper;
@Override
public TbUser login(TbUser user) {
TbUserExample tbUserExample = new TbUserExample();
Criteria createCriteria = tbUserExample.createCriteria();
if (user != null) {
String username = user.getUsername();
createCriteria.andUsernameEqualTo(username);
List<TbUser> selectByExample = tbUserMapper
.selectByExample(tbUserExample);
if (selectByExample != null && !selectByExample.isEmpty()) {
return selectByExample.get(0);
}
}
return null;
}
}注入的Dao：程式碼沒有太大的價值，因為是使用mybatis逆向工程生成，所以就這麼說說吧。
Control層：LoginController.java
@Controller
public class LoginController {
@Autowired
@RequestMapping("/openlogin")
public String openloginpage() {
// 已經登入過，直接進入主頁
try {
// 這裡有bug，整個伺服器重啟後，會預設進這個handler，
// 導致securityManager為null，所以加try避免
if (isRelogin()) {
// 如果已經登陸，無需重新登入，進入首頁
// 使用redirect:/是因為瀏覽器地址要改變
return "redirect:/";
}
} catch (Exception e) {
}
return "login";
}
@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
public CommonResult login(@RequestBody TbUser user) {
return loginUser(user);
}
private CommonResult loginUser(TbUser user) {
return shiroLogin(user); // 呼叫shiro的登陸驗證
}
private CommonResult shiroLogin(TbUser user) {
// 組裝token，包括客戶公司名稱、簡稱、客戶編號、使用者名稱稱；密碼
UsernamePasswordToken token = new UsernamePasswordToken(
user.getUsername(), user.getPassword().toCharArray(), null);
// 記住這個登陸的資訊
token.setRememberMe(true);
String msg;
// shiro登陸驗證
try {
SecurityUtils.getSubject().login(token);
// 0 未授權 1 賬號問題 2 密碼錯誤 3 賬號密碼錯誤
} catch (IncorrectCredentialsException e) {
msg = "登入密碼錯誤. Password for account " + token.getPrincipal()
+ " was incorrect";
return ResultGenerator.genLoginResult0(msg, 2, null);
} catch (ExcessiveAttemptsException e) {
msg = "登入失敗次數過多";
return ResultGenerator.genLoginResult0(msg, 3, null);
} catch (LockedAccountException e) {
msg = "帳號已被鎖定. The account for username " + token.getPrincipal()
+ " was locked.";
return ResultGenerator.genLoginResult0(msg, 1, null);
} catch (DisabledAccountException e) {
msg = "帳號已被禁用. The account for username " + token.getPrincipal()
+ " was disabled.";
return ResultGenerator.genLoginResult0(msg, 1, null);
} catch (ExpiredCredentialsException e) {
msg = "帳號已過期. the account for username " + token.getPrincipal()
+ " was expired.";
return ResultGenerator.genLoginResult0(msg, 1, null);
} catch (UnknownAccountException e) {
msg = "帳號不存在. There is no user with username of "
+ token.getPrincipal();
return ResultGenerator.genLoginResult0(msg, 1, null);
} catch (UnauthorizedException e) {
msg = "您沒有得到相應的授權！" + e.getMessage();
return ResultGenerator.genLoginResult0(msg, 1, null);
} catch (AuthenticationException ex) {
return ResultGenerator.genFailResult(ex.getMessage()); // 自定義報錯資訊
} catch (Exception ex) {
return ResultGenerator.genFailResult("內部錯誤，請重試");
}
Map<String, Object> data = new HashMap<String, Object>();
data.put("username", user.getUsername());
return ResultGenerator.genSuccessResult(data);
}
private boolean isRelogin() {
Subject us = SecurityUtils.getSubject();
if (us != null && us.isAuthenticated()) {
return true; // 引數未改變，無需重新登入，預設為已經登入成功
}
return false; // 需要重新登陸
}
}
