vue-element-ui整合了vue和element-ui框架。 是乙個後台前端解決方案，它基於 vue 和 element-ui實現。它使用了最新的前端技術棧，內建了 i18 國際化解決方案，動態路由，許可權驗證，提煉了典型的業務模型，提供了豐富的功能元件。
vue-element-ui使用了token作為使用者的登入憑證。token是在服務端產生的使用者憑證，產生的token交給前端的使用者。基於token的使用者驗證是無狀態的，服務端產生的token本身包含了使用者資訊。使用者每次傳送請求到服務端的時候都會攜帶token資訊，在服務端驗證後進行操作返回資料。token應該在請求的頭部傳送，以便實現http請求的無狀態。在vue-element-admin中，傳送請求是請求頭部中的x-token攜帶了token資訊。
開啟src/views/login/index.vue,可以看到登入按鈕繫結了handlelogin函式
this
.$store.
dispatch
('user/login'
,this
.loginform)
//store/modules/user.js有login方法
.then((
)=>
)this
.loading =
false})
.catch
(error =>
)this
.loading =
false
this
.getcode()
})
login
(, userinfo)
= userinfo
return
newpromise
((resolve, reject)
=>).
then
(response =>
if(data.erinfo===
'user not exist')}
commit
('set_token'
, data.token)
settoken
(data.token)
//接受後台資料中的token，否則就丟擲異常
resolve()
}).catch
(error =>)}
)},
import
from
'@/api/user'
export
function
login
(data)
)}
(value =
"/confirm"
)@responsebody
public map
confirm
(@requestbody user user)
elseif(
!userdb.
getpassword()
.equals
(encryptpassword
(userdb.
getsecret()
, user.
getpassword()
))) string token = tokenutil.
generatetoken
(user.
getusername()
, user.
getpassword()
);map.
put(
"token"
, token)
;return map;
}前文提到的token就是在這裡生成的，這裡使用json web token。返回的token將會被vuex儲存到cookie裡。如果後台驗證成功，返回的json資料會先交給store/user.js中被匯入的login方法處理，如果得到的token不為空，則設定該token為使用者的憑證，之後的請求都會用到這個token。如果為空，則丟擲異常。丟擲的異常在store/user.js下的login方法再丟擲到index.vue下的方法。
回到views下的index.vue中的handlelogin。看到**可以知道如果登入驗證通過(呼叫的沒有丟擲異常)，則進行路由跳轉。否則頁面提示錯誤資訊(沒有通過後端的驗證)。這樣就完成了一次登入流程，使用者通過驗證後就可以瀏覽頁面了。
搭建vue element admin環境
1.安裝git 直接在資料夾下輸入cmd回車 轉殖專案 2 修改路徑 在cmd視窗執行以下兩條命令 npm config set prefix c node node global npm config set cache c node node cache 進入專案目錄 cd vue elemen...
vue element admin使用記錄
再 man.js同目錄下的permission.js中設定路由守衛和登陸判斷。在whitelist中設定路由白名單。不受非登陸狀態下攔截配置 使用js cookie模組來判斷使用者是否登陸狀態。是否快取有使用者登陸資訊。登陸狀態判斷邏輯為，如果獲取到後端設定的cookie欄位，則判斷是否有使用者資訊...
後台模板 vue element admin
而vue element admin是基於element ui 的一套後台管理系統整合方案。功能 功能 解壓壓縮包 進入目錄 cd vue element admin master 安裝依賴 npm install 啟動。執行後，瀏覽器自動彈出並訪問http localhost 9527 npm r...