流程圖:
登入核心**:
//呼叫介面發起登入請求
login.
loginuser
(this
.user)
.then
(response =>
)//第三步在requests.js建立***
//第四步呼叫介面,通過token獲取使用者資訊並存在cookie中
login.
getuserinfobytoken()
.then
(response =>
)//從登入頁面跳轉到首頁
window.location.href =
'/'})}
else
)}
login.loginuser
是自己編寫的js物件,作用就是向後端發起登入請求
終於到了前端登入實現過程了,
需要的第三方庫有:js-cookie,axios
js-cookie
方便操作對cookie的增刪,因為需要將後端登入成功傳遞過來的token進行儲存到cookie中去,
封裝axios並定義乙個***:
如下:requests.js
當登入成功時,後端返回了token之後,存入進cookie中,並根據後端介面,利用token得到一些使用者資訊,eg:頭像,暱稱,id等等import axios from
'axios'
import cookie from
'js-cookie'
const service = axios.
create()
;service.interceptors.request.
use(config =>
return config;},
error =>);
export
default service
因為後端根據token獲取使用者資訊的介面是,在httpservletrequests
中header內取出token。
所以***的作用就體現出來了,*****的意思是,如果cookie中存在token這個東西,就把axios傳送的每個請求的header加上token,方便於後續請求後端介面時得request的header中含有token資訊,
token和使用者info最後都存在了cookie中,並且是以字串形式,所以使用的時候需要利用到js中的json.parse方法進行轉換
showinfo()
}
nuxt框架前後端登入註冊功能實現 二
上次說到了登錄檔單驗證的規則,登入表單也類似這裡就不在說了。現在來講一下後端註冊和登入介面,以及前端登入如何顯示相應的一些使用者資料。登入介面的實現原理 1 先將前端傳遞過來的vo實體類的屬性進行判斷是否為空,若有乙個為空則登入失敗,2 根據傳遞過來的登入賬號,判斷資料庫中是否有該條資料,若無則登陸...
使用axios實現登入功能 前後端聯調
目錄2.在login.vue頁面中使用axios傳送請求 測試axios import login from components login 修飾符指的是 src目錄 export default new router eslint disable 配置請求django後端的位址 介面資訊,生成請...
框架之 前後端分離
解決前後端開發技術不同,耦合出現的困難性 前端不再需要向後台提供模板或是後台在前端html中嵌入後台 提高工作效率,分工更加明確 前後端分離的工作流程可以使前端只關注前端的事,後台只關心後台的活,兩者開發可以同時進行,在後台還沒有時間提供介面的時候,前端可以先將資料寫死或者呼叫本地的json檔案即可...