Vue中的驗證登錄狀態的實現方法
阿新 • • 發佈：2019-05-10
var === 配置路由 vue scrip 成功 lin 鏈接 lan
Vue項目中實現用戶登錄及token驗證
先說一下我的實現步驟：
- 使用easy-mock新建登錄接口，模擬用戶數據
- 使用axios請求登錄接口，匹配賬號和密碼
- 賬號密碼驗證後， 拿到token，將token存儲到sessionStorage中，並跳轉到首頁
- 前端每次跳轉時，就使用導航守衛(vue-router.beforeEach)判斷 sessionStorage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面。
- 註銷後，就清除sessionStorage裏的token信息並跳轉到登錄頁面
使用easy-mock模擬用戶數據
我用的是easy-mock,新建了一個接口，用於模擬用戶數據:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
{
"error_code": 0,
"data": [{
"id": ‘1‘,
"usertitle": "管理員",
"username": "admin",
"password": "123456",
"token": "@date(T)",
},
{
"id": ‘2‘,
"usertitle": "超級管理員",
"username": "root",
"password": "root",
"token": "@date(T)",
}
]
}
|
login.vue中寫好登陸框：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template>
<div>
<p>用戶名：<input type=‘text‘ v-model="userName"></p>
<p>密碼：<input type=‘text‘ v-model="passWord"></p>
<button @click="login()">登錄</button>
</div>
</template>
<script>
export default {
data() {
return {
userName:‘root‘,
passWord:‘root‘
}
}
}
</script>
|
然後下載axios：npm install axios --save,用來請求剛剛定義好的easy-mock接口：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
login(){
const self = this;
axios.get(‘https://easy-mock.com/mock/5c7cd0f89d0184e94358d/museum/login‘).then(response=>{
var res =response.data.data,
len = res.length,
userNameArr= [],
passWordArr= [],
ses= window.sessionStorage;
// 拿到所有的username
for(var i=0; i<len; i++){
userNameArr.push(res[i].username);
passWordArr.push(res[i].password);
}
console.log(userNameArr, passWordArr);
if(userNameArr.indexOf(this.userName) === -1){
alert(‘賬號不存在！‘);
}else{
var index = userNameArr.indexOf(this.userName);
if(passWordArr[index] === this.passWord){
// 把token放在sessionStorage中
ses.setItem(‘data‘, res[index].token);
this.$parent.$data.userTitle = res[index].usertitle;
//驗證成功進入首頁
this.startHacking (‘登錄成功！‘);
//跳轉到首頁
this.$router.push(‘/index‘);
// console.log(this.$router);
}else{
alert(‘密碼錯誤！‘)
}
}
}).catch(err=>{
console.log(‘連接數據庫失敗！‘)
})
}
|
這一步最重要的是當賬號密碼正確時，把請求回來的token放在sessionStorage中，
配置路由
然後配置路由新加一個meta屬性：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{
path: ‘/‘,
name: ‘login‘,
component: login,
meta:{
needLogin: false
}
},
{
path: ‘/index‘,
name: ‘index‘,
component: index,
meta:{
needLogin: true
}
}
|
判斷每次路由跳轉的鏈接是否需要登錄，
導航衛士
在main.js中配置一個全局前置鉤子函數：router.beforeEach（），他的作用就是在每次路由切換的時候調用
這個鉤子方法會接收三個參數：to、from、next。
- to：Route：即將要進入的目標的路由對象，
- from：Route：當前導航正要離開的路由，
- next：Function：個人理解這個方法就是函數結束後執行什麽，先看官方解釋
- 1.next()：進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是confirmed（確認的），
- 2.next(false)：中斷當前的導航。如果瀏覽器的url改變了（可能是用戶手動或瀏覽器後退按鈕），那麽url地址會重置到from路由對應的地址。
- 3.next(‘/‘)或next({path:‘/‘})：跳轉到一個不同的地址。當前導航被中斷，進入一個新的導航。
用sessionStorage存儲用戶token
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
//路由守衛
router.beforeEach((to, from, next)=>{
//路由中設置的needLogin字段就在to當中
if(window.sessionStorage.data){
console.log(window.sessionStorage);
// console.log(to.path) //每次跳轉的路徑
if(to.path === ‘/‘){
//登錄狀態下 訪問login.vue頁面 會跳到index.vue
next({path: ‘/index‘});
}else{
next();
}
}else{
// 如果沒有session ,訪問任何頁面。都會進入到 登錄頁
if (to.path === ‘/‘) { // 如果是登錄頁面的話，直接next() -->解決註銷後的循環執行bug
next();
} else { // 否則 跳轉到登錄頁面
next({ path: ‘/‘ });
}
}
})
|
這裏用了router.beforeEach vue-router導航守衛
每次跳轉時都會判斷sessionStorage中是否有token值，如果有則能正常跳轉，如果沒有那麽就返回登錄頁面。
註銷
至此就完成了一個簡單的登錄狀態了，瀏覽器關閉後sessionStorage會清空的，所以當用戶關閉瀏覽器再打開是需要重新登錄的
當然也可以手動清除sessionStorage，清除動作可以做成註銷登錄，這個就簡單了。
?| 1 2 3 4 5 6 |
loginOut(){
// 註銷後 清除session信息 ，並返回登錄頁
window.sessionStorage.removeItem(‘data‘);
this.common.startHacking(this, ‘success‘, ‘註銷成功！‘);
this.$router.push(‘/index‘);
}
|
寫一個清除sessionStorag的方法。
一個簡單的保存登錄狀態的小Demo。
Vue中的驗證登錄狀態的實現方法