vue專案中實現使用者登入及token驗證
先說一下我的實現步驟:
使用easy-mock新建登入介面,模擬使用者資料
使用axios請求登入介面,匹配賬號和密碼
賬號密碼驗證後, 拿到token,將token儲存到sessionstorage中,並跳轉到首頁
前端每次跳轉時,就使用導航守衛(vue-router.beforeeach)判斷 sessionstorage 中有無 token,沒有就跳轉到登入頁面,有則跳轉到對應路由頁面。
登出後,就清除sessionstorage裡的token資訊並跳轉到登入頁面
使用easy-mock模擬使用者資料
我用的是easy-mock,新建了乙個介面,用於模擬使用者資料:
"error_code": 0,
"data": [elseelse).catch(err=>);
}elseelse else );
這裡用了router.beforeeach vue-router導航守衛
每次跳轉時都會判斷sessionstorage中是否有token值,如果有則能正常跳轉,如果沒有那麼就返回登入頁面。
登出至此就完成了乙個簡單的登入狀態了,瀏覽器關閉後sessionstorage會清空的,所以當使用者關閉瀏覽器再開啟是需要重新登入的
當然也可以手動清除sessionstorage,清除動作可以做成登出登入,這個就簡單了。
loginout(){
// 登出後 清除session資訊 ,並返回登入頁
window.sessionstorage.removeitem('data');
this.common.starthacking(this, 'success', '登出成功!');
this.$router.push('/index');
寫乙個清除sessionstorag的方法。
乙個簡單的儲存登入狀態的小demo。
vue-router守衛導航官方文件:vue-router導航守衛
PHP使用者名稱正則驗證
在php中,通過正規表示式對使用者名稱進行格式驗證,煩了我好久,終於找到了解決辦法,在這裡分享給大家。使用者名稱驗證規則 使用者名稱只能由數字 字母 中文漢字及下劃線組成,不能包含特殊符號。header content type text html charset utf 8 string dov多...
WebService 使用者名稱密碼驗證
原文 webservice 使用者名稱密碼驗證 在專案開發的過程中,webservice是經常要用的,當呼叫webservice方法時,需要經過服務的驗證才可以呼叫,一般就是使用者名稱 密碼驗證,還有乙個就是證書.下面程式使用的是使用者名稱 密碼的方式,很簡單的乙個程式.專案截圖 webservic...
JSP判斷使用者名稱的重複
在我的jsp學生資訊管理系統中的檢測使用者名稱是否重複的頁面中時 遇到了乙個可笑的問題 就是自己不會寫 經過了幾天的研究 依舊沒有發現該怎麼解決,最後無奈之下 上網海搜 結果 問題很容易就解決了 需要注意的是一下的幾個要點 1 jsp中沒有equals這個單詞的用法,這個是沒經過驗證的 只是聽大家說...