vue移動端 登錄註冊的業務流程

在我們開發一些項目的時候,有些路由頁面是要登錄才能進入,例如進入個人中心,或者我的博客,寫博客等等一些頁面…
當然,也有一些頁面是不需要登錄就能進去的,例如:首頁,註冊頁等等…
當需要登錄的頁面,我們就要加上驗證,不需要的則不用
該如何判斷呢?就該在路由裏的js加一些代碼來判斷了

登錄流程

判斷用戶是否登錄
第一次登錄的時候,前端調後端的登陸接口,發送用戶名和密碼,後端收到請求,驗證用戶名和密碼
如果想點進我的頁面,沒有登錄的話,會自動跳轉登錄頁面,前端可根據後臺返回的信息,在路由跳轉中做判斷。因爲在這裏使用的 axios做vue的請求模塊,所以項目採用的是在請求攔截模塊中根據後臺返回的登錄狀態碼進行判斷
客戶端輸入手機號,點擊驗證碼,進行登錄,服務端對手機號,驗證碼進行驗證,驗證通過,則說明登陸成功,根據當前用戶信息,生成了token,將token信息以cookie形式返回到了客戶端
在這裏插入圖片描述
登錄成功保存用戶狀態信息
驗證成功,就給前端返回一個token,前端拿到token,將token存儲到localStorage和vuex中
在這裏插入圖片描述 並跳轉路由頁面 前端每次跳轉路由,就判斷 localStroage 中有無 token ,沒有就跳轉到登錄頁面,有則跳轉到對應路由頁面 每次調後端接口,都要在請求頭中加token,我們常用axios的請求庫中,添加全局攔截器,將token設置在請求頭中。 後端判斷請求頭中有無token,有token,就拿到token並驗證token,驗證成功就返回數據,驗證失敗(例如:token過期)就返回401,請求頭中沒有token也返回401 如果前端拿到狀態碼爲401,就清除token信息並跳轉到登錄頁面