之前的文章我們把登錄頁寫了出來,但是想要讓登錄現實他的基本功能,要如何做呢?本篇文章就來幫你實現第一步,讓登錄頁對賬號密碼做校驗,並且完成登錄跳轉。
LoginController
1. 要實現登錄,我們需要先編寫一個登錄的controller類:(每一步的注釋應該比較詳細了~)
@Controller public class LoginController { // 發送post請求,代替了RequestMapping(value="/user/login", method="post") @PostMapping(value = "/user/login") // 對登錄請求判斷request的參數值,並存放在map中 public String login(@RequestParam("username") String username, @RequestParam("password") String password, Map<String, Object> map) { // 我們判斷,如果登錄名不是空,並且,密碼是 123456 就登錄成功(暫不涉及數據庫) if (!StringUtils.isEmpty(username) && "123456".equals(password)) { // 登錄成功,就跳轉到下一個頁面 return "dashboard"; } else { // 登錄失敗,刷新本登錄頁 map.put("msg", "用戶名密碼錯誤"); return "login"; } } }
為了開發方便,我們還可以將application.properties中添加一個 禁用緩存的參數: spring.thymeleaf.cache=fasle ,這樣html頁面有改動的時候,我們只需要用快捷鍵crtl+F9或者點擊如圖的編譯按鈕,重新編譯下就可以在頁面看結果,而不需要再次啟動Tomcat服務了。
這時候訪問頁面,會報錯,是因為我們沒有在html頁面中將類中的參數放進去,所以找不到我們需要的值,那么……
2. 校驗頁面
先來看,沒有配置html頁時訪問的情況,表示完全沒有關聯或者獲取的頁面的數據;
然后我們添加下方參數配置再看,若只添加action和method,會是神馬情況:(表示String的參數username不存在)
最后看添加了所有參數后的情況,我們在最后看一下;
login.HTML
我們來看html頁要如何修改呢?
來看,我圖中標記的地方,就是需要添加的東西:
1. 首先添加th:action,告訴模板,我們要跳轉的請求是user/login,而且是post請求的;
2.告訴模板,我們的參數名稱是username和password,這也是controller類中設定的參數值,要完全一致。
3.注意,我們之前說如果賬號密碼不對,要有個msg提示,可這msg在模板中並沒有表現,所以,我們要在html中添加一段關於msg的判斷:如果msg是空,就不展示mgs,如果不為空就展示:
看,我在下方還用到了th:if語句,這個在官方文檔中有記錄如何使用,而且優先級比較高,所以會優先判斷這個方法是否生效,然后才展示text。
<p style="color: red;" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
好,接下來我們試一下,是否成功了,先輸入賬號admin,密碼111,點擊登錄,看跳轉是否依然還是login頁:
然后來看,賬號admin,密碼123456,是否跳轉到下一頁中:
我們的跳轉是成功的,只是樣式有些問題,稍后,我們來看怎么處理。
試圖映射與重定向
跳轉沒問題了,可是還有另一個問題,當我們進入到跳轉頁以后,按F5刷新頁面,會發現,頁面提示:問是否需要重新提交表單,那么為了不重復提交表單,我們需要這樣配置。
1. 首先在我們之前的LoginController類中添加映射:(修改return ,將我們的請求定向到另一個路徑,而非/user/login)
if (!StringUtils.isEmpty(username) && "123456".equals(password)) { // 登錄成功,就跳轉到下一個頁面 // 重定向URL return "redirect:/main.html";
2.然后在之前的MyMvcConfig中添加一下映射的路徑,讓上邊的main.html引到我們想要跳轉的那個“dashboard”頁。
registry.addViewController("/main.html").setViewName("dashboard");
3. 再來用正確的賬號密碼登錄一下,查看我們修改的東西是否生效了,注意看url和頁面:
很棒,效果和我們想的基本一樣,那么這還沒完,一個完整的登錄還有其他的問題,比如我們把這個url復制到其他瀏覽器會是什么樣子的?
依然能訪問成功,那我們做登錄還有卵用,所以這個時候,攔截器的作用就體現出來了。
攔截器
首先,了解一下攔截器的作用,他是用來做登錄檢查的,也就是沒有前邊的登錄,就不可以訪問后邊的頁面。
如何實現,來看:
1. 先添加一個攔截器,我們新建一個登錄的攔截器在component包下,名字就叫 LoginHandlerInterceptor (實現接口HandlerInterceptor),IDEA編譯器,我們按ctrl+O,把需要用到的三個接口都拉出來,然后開始編寫:
/** * 攔截器,登錄檢查 */ public class LoginHandlerInterceptor implements HandlerInterceptor { // 目標方法執行之前 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { Object user = request.getSession().getAttribute("loginUser"); // 如果獲取的request的session中的loginUser參數為空(未登錄),就返回登錄頁,否則放行訪問 if (user == null) { // 未登錄,給出錯誤信息, request.setAttribute("msg","無權限請先登錄"); // 獲取request返回頁面到登錄頁 request.getRequestDispatcher("/index.html").forward(request, response); return false; } else { // 已登錄,放行 return true; } } @Override public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception { } @Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception { } }
2. 上邊配置的session需要取值才能做判斷,那么我們需要在controller中設置這個session值,以讓它生效:
3. 之前說過,要讓登錄有個攔截器的功能,就是除了訪問首頁我們可以,其他未登錄的都攔截下來,所以,需要在MyMvcConfig中添加一個攔截器,讓上邊的配置都有作用:
// 注冊攔截器 @Override public void addInterceptors(InterceptorRegistry registry) { // 添加攔截的請求,並排除幾個不攔截的請求 registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**") .excludePathPatterns("/index.html", "/", "/user/login"); }
這樣,除了首頁的請求意外,其他請求都會被攔截下來,我們再看這樣配置以后的效果:
當我們直接訪問localhost:8080/main.html時:
這時候,就只能通過攔截器排除的那幾個請求來訪問和登錄后才能正常訪問了