引言：本文在利用springboot和vue實現前後端分離一文的基礎上追加的路由守衛；未登入時會限制訪問某些頁面（前台控制），與之前的shiro不同；
在前後端完全分離的情況下，vue專案中實現token驗證大致思路如下：
首次登入的時，前端調後端的登入介面，傳送輸入框中的使用者名稱和密碼；
後端收到請求，驗證使用者名稱和密碼，驗證成功，就給前端返回乙個token（令牌相當於乙個門牌，如返回物件）；
前端拿到token，將token儲存到localstorage和vuex中，並跳轉路由頁面
前端每次跳轉路由，就判斷 localstroage 中有無 token ，沒有就跳轉到登入頁面，有則跳轉到對應路由頁面
每次調後端介面，都要在請求頭中加token
後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回資料，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401
如果前端拿到狀態碼為401，就清除token資訊並跳轉到登入頁面（首頁）
通過this.ruleform2.name獲取輸入框的name值，將輸入框中的name通過鏈結傳入後台；後台從資料庫中查出對應的字段，返回狀態碼以及值；
通過response.data.data.age（沒有密碼欄位用年齡代替）獲取資料庫的值，與輸入框中的作對比，一致進行下一步；
在前端寫入使用者狀態資訊到localstorage中，localstorage.setitem(「authorer」, response.data.data.name);
登入成功跳轉主頁否則跳轉初始頁；
>
>
>
登入頁面h2
>
"inputstyle"
class
="inputclass"
>
:model
="ruleform2"
status-icon
:rules
="rules2"
ref="ruleform2"
label-width
="100px"
class
="demo-ruleform"
>
label
="使用者名稱"
prop
="name"
>
type
="text"
v-model
="ruleform2.name"
auto-complete
="off"
>
el-input
>
el-form-item
>
label
="密碼"
prop
="pass"
>
type
="password"
v-model
="ruleform2.pass"
auto-complete
="off"
>
el-input
>
el-form-item
>
label
="驗證碼"
prop
="code"
>
v-model.number
="ruleform2.code"
>
el-input
>
el-form-item
>
>
type
="primary"
@click
="submitform('ruleform2')"
>
提交el-button
>
@click
="resetform('ruleform2')"
>
重置el-button
>
type
="text"
>
"/">
回到首頁router-link
>
el-button
>
el-form-item
>
el-form
>
div>
div>
template
>
>
// 編寫js行為
export
default,}
;}, methods:
else}}
).catch
((error)
=>);
this
.$message
(this
.ruleform2.name);}
,resetform
(formname),}
,};script
>
scoped
>
.inputclass
.codename
.name
style
>
未登入時：對登入頁面、初始頁不攔截，其他頁面攔截；登入狀態：可以訪問任何頁面
通過**localstorage.getitem(『authorer』)**獲取localstorage中的值，如果有值繼續訪問，沒有則跳轉登入介面；
重：
default router;
將authorer中的資訊寫入頭部資訊authorization中；後台申請乙個httpservletrequest接收authorization值，並進行判斷；
//引用axios，設定基礎的url// 新增請求***
axios.interceptors.request.
use(
function
(config)
// 在傳送請求之前做些什麼
return config;},
function
(error)
);
Vue路由守衛
js const router new vuerouter 前置的鉤子函式 最後要執行next 才會跳轉 router.beforeeach to,from,next 後置的鉤子函式 已經跳轉了不需要next router.aftereach to,from 主要是簡單介紹一下，路由守衛主要用於檢驗...
vue 路由守衛
正如其名，vue router提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中 全域性的,單個路由獨享的,或者元件級的。記住引數或查詢的改變並不會觸發進入 離開的導航守衛 可以使用router.beforeeach註冊乙個全域性前置守衛 import router f...
Vue路由守衛
我們在看一些網頁的時候如果想進一步了解一些東西的詳情資訊的話,當前的網頁就會讓我們進行登入,我們必須及逆行登入後才能夠看到我們想看到的詳情資訊,這個操作我們稱之為 路由守衛也是我們在做一些專案的時候必要進行的一步,如果我們不做這一步的話,自己所作專案中的所有的資料,不管是可以公共訪問的還是不能進行公...