關於vue登入註冊,並保持登入狀態,是vue玩家必經之路,網上也有很多的解決方法,但是有一些太過於複雜,新手可能會看的一臉懵逼,現在給大家介紹一種我自己寫專案在用而且並不難理解的一種方法。
專案中有一些路由是需要登入才可以進入的,比如首頁,個人中心等等
有一些路由是不需要登入就可以進入,比如登入頁,註冊頁,忘記密碼等等
那如何判斷路由是否需要登入呢?就要在路由js裡面做文章
在router.js中新增meta區分
比如登入註冊頁面,不需要登入即可進入,那麼我們把meta中的islogin標誌設定為false
},},
而在首頁我們需要登入才能進入,那麼我們把meta中的islogin標誌設定為true
,
}
這樣我們就為進入各個路由是否需要登入做了區分。
接下來我們在login.vue中修改登入後狀態
我們使用axios向後台發起登入請求
this.$axios.post("/***/login", )
.then(data => else
});
vuex裡面我是這樣寫的(如果專案不需要vuex,那麼直接使用html5儲存就可以了):
export const store = new vuex.store(,
// 獲取屬性的狀態
getters: ,
// 設定屬性狀態
mutations: ,
},// 應用mutations
actions: , flag) ,
}})
重點來了~,在mian.js裡
router.beforeeach((to, from, next) => )
}//如果登入標誌不存在,即未登入
}else)
//iviewui友好提示
iview.message.info('請先登入')
//使用者進入無需登入的介面,則跳轉繼續
}else
}});
router.aftereach(route => );
這樣就已經完成了vue的登入註冊,當使用者關閉瀏覽器或者第二天再次進入**,使用者依舊可以保持著登入的狀態直到使用者手動退出登入。
tips:使用者退出只需要localstorage.removeitem("flag")即可
原文
django 使用者如何保持登入狀態
最不可行的方法就是在每乙個需要驗證使用者的檢視函式上加裝飾器 login required 每個認證函式都加的話比較繁瑣。可行的辦法是在訪問檢視函式前給他來乙個攔截 中介軟體就派上用場了。首先你需要定義一些不需要登入驗證的頁面集合。例如 無需登入介面 no login urls check regi...
在登入狀態時隱藏登入和註冊按鈕
具體思路 使用者進入首頁,此時是未登入狀態,則顯示登陸 註冊按鈕,登陸以後則顯示使用者名稱。我們可以使用控制項顯示隱藏來實現,先判斷當前session中是否有使用者資料,如果有資料我們將登陸 註冊按鈕進行隱藏,如果沒有資料則將使用者名稱等元件隱藏。實現 登陸註冊元件,注意該元件id logandre...
vue使用者登入狀態判斷
之前專案中用來判斷是否登入我寫了多種方案,但是最終只有乙個方案是比較好的,這篇部落格就是分享該方案 先說基本要求 判斷登入方案需要滿足下面幾點 未登入狀態下的重新整理 1.1 在需要登入頁面中重新整理是需要跳轉到登入頁的 1.2 在不需要登入的頁面中重新整理,不需要跳轉 在未登入狀態下,跳轉到需要登...