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