Vue登錄注冊并保持登錄狀態(tài)的方法
關(guān)于vue登錄注冊,并保持登錄狀態(tài),是vue玩家必經(jīng)之路,網(wǎng)上也有很多的解決方法,但是有一些太過于復(fù)雜,新手可能會看的一臉懵逼,現(xiàn)在給大家介紹一種我自己寫項目在用而且并不難理解的一種方法。
項目中有一些路由是需要登錄才可以進(jìn)入的,比如首頁,個人中心等等
有一些路由是不需要登錄就可以進(jìn)入,比如登錄頁,注冊頁,忘記密碼等等
那如何判斷路由是否需要登錄呢?就要在路由JS里面做文章
在router.js中添加meta區(qū)分
比如登錄注冊頁面,不需要登錄即可進(jìn)入,那么我們把meta中的isLogin標(biāo)志設(shè)置為false
{
//登錄
path: '/login',
component: login,
meta: {
isLogin: false
}
},
{
//注冊
path: '/register',
component: register,
meta: {
isLogin: false
}
},
而在首頁我們需要登錄才能進(jìn)入,那么我們把meta中的isLogin標(biāo)志設(shè)置為true
{
//首頁
path: '/home',
component: home,
meta: {
isLogin: true
},
}
這樣我們就為進(jìn)入各個路由是否需要登錄做了區(qū)分。
接下來我們在login.vue中修改登錄后狀態(tài)
我們使用axios向后臺發(fā)起登錄請求
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在用戶刷新的時候userLogin會回到默認(rèn)值false,所以我們需要用到HTML5儲存
//我們設(shè)置一個名為Flag,值為isLogin的字段,作用是如果Flag有值且為isLogin的時候,證明用戶已經(jīng)登錄了。
localStorage.setItem("Flag", "isLogin");
//iViewUi的友好提示
this.$Message.success(data.data.message);
//登錄成功后跳轉(zhuǎn)到指定頁面
this.$router.push("/home");
}
});
Vuex里面我是這樣寫的(如果項目不需要Vuex,那么直接使用HTML5儲存就可以了):
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)
},
}
})
重點來了~,在mian.js里
router.beforeEach((to, from, next) => {
//獲取用戶登錄成功后儲存的登錄標(biāo)志
let getFlag = localStorage.getItem("Flag");
//如果登錄標(biāo)志存在且為isLogin,即用戶已登錄
if(getFlag === "isLogin"){
//設(shè)置vuex登錄狀態(tài)為已登錄
store.state.isLogin = true
next()
//如果已登錄,還想想進(jìn)入登錄注冊界面,則定向回首頁
if (!to.meta.isLogin) {
//iViewUi友好提示
iView.Message.error('請先退出登錄')
next({
path: '/home'
})
}
//如果登錄標(biāo)志不存在,即未登錄
}else{
//用戶想進(jìn)入需要登錄的頁面,則定向回登錄界面
if(to.meta.isLogin){
next({
path: '/login',
})
//iViewUi友好提示
iView.Message.info('請先登錄')
//用戶進(jìn)入無需登錄的界面,則跳轉(zhuǎn)繼續(xù)
}else{
next()
}
}
});
router.afterEach(route => {
window.scroll(0, 0);
});
這樣就已經(jīng)完成了Vue的登錄注冊,當(dāng)用戶關(guān)閉瀏覽器或者第二天再次進(jìn)入網(wǎng)站,用戶依舊可以保持著登錄的狀態(tài)直到用戶手動退出登錄。
Tips:用戶退出只需要localStorage.removeItem("Flag")即可
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vuex中mapState,mapGetters,mapMutations,mapActions的作用
這篇文章主要介紹了vuex中mapState,mapGetters,mapMutations,mapActions的作用,需要的朋友可以參考下2018-04-04
vue中關(guān)于v-for循環(huán)key值問題的研究
這篇文章主要介紹了vue中關(guān)于v-for循環(huán)key值問題的研究,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06
Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明)
這篇文章主要介紹了Vue實現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說明),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10

