Vue登錄注冊(cè)并保持登錄狀態(tài)的方法
關(guān)于vue登錄注冊(cè),并保持登錄狀態(tài),是vue玩家必經(jīng)之路,網(wǎng)上也有很多的解決方法,但是有一些太過(guò)于復(fù)雜,新手可能會(huì)看的一臉懵逼,現(xiàn)在給大家介紹一種我自己寫(xiě)項(xiàng)目在用而且并不難理解的一種方法。
項(xiàng)目中有一些路由是需要登錄才可以進(jìn)入的,比如首頁(yè),個(gè)人中心等等
有一些路由是不需要登錄就可以進(jìn)入,比如登錄頁(yè),注冊(cè)頁(yè),忘記密碼等等
那如何判斷路由是否需要登錄呢?就要在路由JS里面做文章
在router.js中添加meta區(qū)分
比如登錄注冊(cè)頁(yè)面,不需要登錄即可進(jìn)入,那么我們把meta中的isLogin標(biāo)志設(shè)置為false
{
//登錄
path: '/login',
component: login,
meta: {
isLogin: false
}
},
{
//注冊(cè)
path: '/register',
component: register,
meta: {
isLogin: false
}
},
而在首頁(yè)我們需要登錄才能進(jìn)入,那么我們把meta中的isLogin標(biāo)志設(shè)置為true
{
//首頁(yè)
path: '/home',
component: home,
meta: {
isLogin: true
},
}
這樣我們就為進(jìn)入各個(gè)路由是否需要登錄做了區(qū)分。
接下來(lái)我們?cè)趌ogin.vue中修改登錄后狀態(tài)
我們使用axios向后臺(tái)發(fā)起登錄請(qǐng)求
this.$axios.post("/xxx/login", {user:name,password:pwd})
.then(data => {
//登錄失敗,先不討論
if (data.data.status != 200) {
//iViewUi的友好提示
this.$Message.error(data.data.message);
//登錄成功
} else {
//設(shè)置Vuex登錄標(biāo)志為true,默認(rèn)userLogin為false
this.$store.dispatch("userLogin", true);
//Vuex在用戶(hù)刷新的時(shí)候userLogin會(huì)回到默認(rèn)值false,所以我們需要用到HTML5儲(chǔ)存
//我們?cè)O(shè)置一個(gè)名為Flag,值為isLogin的字段,作用是如果Flag有值且為isLogin的時(shí)候,證明用戶(hù)已經(jīng)登錄了。
localStorage.setItem("Flag", "isLogin");
//iViewUi的友好提示
this.$Message.success(data.data.message);
//登錄成功后跳轉(zhuǎn)到指定頁(yè)面
this.$router.push("/home");
}
});
Vuex里面我是這樣寫(xiě)的(如果項(xiàng)目不需要Vuex,那么直接使用HTML5儲(chǔ)存就可以了):
export const store = new Vuex.Store({
// 設(shè)置屬性
state: {
isLogin: false,
},
// 獲取屬性的狀態(tài)
getters: {
//獲取登錄狀態(tài)
isLogin: state => state.isLogin,
},
// 設(shè)置屬性狀態(tài)
mutations: {
//保存登錄狀態(tài)
userStatus(state, flag) {
state.isLogin = flag
},
},
// 應(yīng)用mutations
actions: {
//獲取登錄狀態(tài)
setUser({commit}, flag) {
commit("userStatus", flag)
},
}
})
重點(diǎn)來(lái)了~,在mian.js里
router.beforeEach((to, from, next) => {
//獲取用戶(hù)登錄成功后儲(chǔ)存的登錄標(biāo)志
let getFlag = localStorage.getItem("Flag");
//如果登錄標(biāo)志存在且為isLogin,即用戶(hù)已登錄
if(getFlag === "isLogin"){
//設(shè)置vuex登錄狀態(tài)為已登錄
store.state.isLogin = true
next()
//如果已登錄,還想想進(jìn)入登錄注冊(cè)界面,則定向回首頁(yè)
if (!to.meta.isLogin) {
//iViewUi友好提示
iView.Message.error('請(qǐng)先退出登錄')
next({
path: '/home'
})
}
//如果登錄標(biāo)志不存在,即未登錄
}else{
//用戶(hù)想進(jìn)入需要登錄的頁(yè)面,則定向回登錄界面
if(to.meta.isLogin){
next({
path: '/login',
})
//iViewUi友好提示
iView.Message.info('請(qǐng)先登錄')
//用戶(hù)進(jìn)入無(wú)需登錄的界面,則跳轉(zhuǎn)繼續(xù)
}else{
next()
}
}
});
router.afterEach(route => {
window.scroll(0, 0);
});
這樣就已經(jīng)完成了Vue的登錄注冊(cè),當(dāng)用戶(hù)關(guān)閉瀏覽器或者第二天再次進(jìn)入網(wǎng)站,用戶(hù)依舊可以保持著登錄的狀態(tài)直到用戶(hù)手動(dòng)退出登錄。
Tips:用戶(hù)退出只需要localStorage.removeItem("Flag")即可
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中使用vue-i18n報(bào)錯(cuò)的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue項(xiàng)目中常見(jiàn)問(wèn)題及解決方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中常見(jiàn)問(wèn)題及解決方案,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
前端Vue項(xiàng)目部署到服務(wù)器的全過(guò)程以及踩坑記錄
使用Vue做前后端分離項(xiàng)目時(shí),通常前端是單獨(dú)部署,用戶(hù)訪(fǎng)問(wèn)的也是前端項(xiàng)目地址,因此前端開(kāi)發(fā)人員很有必要熟悉一下項(xiàng)目部署的流程,下面這篇文章主要給大家介紹了關(guān)于前端Vue項(xiàng)目部署到服務(wù)器的全過(guò)程以及踩坑記錄的相關(guān)資料,需要的朋友可以參考下2023-05-05

