資訊專欄INFORMATION COLUMN
摘要：先說點什么和路由攔截這一塊搗鼓的有一段時間了總算是爬出來了特地來分享一下首先聲明沒有什么基礎(chǔ)介紹用的是登錄狀態(tài)存儲的方法進(jìn)入正題刷新刷新相當(dāng)與重啟項目，之前獲取到的數(shù)據(jù)也只是通過暫存起來，項目關(guān)閉時就不見了，這有些像電腦重啟，存儲在的數(shù)據(jù)會
先說點什么
vuex和路由攔截這一塊搗鼓的有一段時間了,總算是爬出來了,特地來分享一下,首先聲明沒有什么基礎(chǔ)介紹,用的是登錄狀態(tài)存儲sessionStorage的方法!!!
進(jìn)入正題 刷新刷新相當(dāng)與重啟項目，之前獲取到的數(shù)據(jù)也只是通過store暫存起來，項目關(guān)閉時就不見了，這有些像電腦重啟，存儲在RAM的數(shù)據(jù)會消失。但是儲存在sessionstorage、localstorage和cookie里的內(nèi)容不會消失.
Vuex 方法思路首先得熟悉vuex,官網(wǎng)中介紹 Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,也就是說vuex中的store中的數(shù)據(jù)都是臨時的,都是一些變量,頁面刷新重新加載,所有都清空,并且已經(jīng)在頁面中沒有進(jìn)行二次登陸,vuex中就一直是空的,所以就分生出了幾個方法
1.因為sessionstorage(關(guān)閉頁面會消失)、localstorage和cookie刷新頁面數(shù)據(jù)不會消失,所以可以把所有請求到的數(shù)據(jù)都儲存在里邊,用的時候再取
2.使用vuex插件
3.登錄的時候把token和登錄狀態(tài)(自定義的)賦值給sessionstorage,當(dāng)刷新頁面的時候(路由跳轉(zhuǎn))從 sessionstorage中獲取token和登錄狀態(tài)賦值給store,就會自己重新請求相關(guān)頁面的數(shù)據(jù)
我思考過后我選擇了方法3,只不過這個方法要和路由攔截結(jié)合起來,后面路由完事一起貼代碼代碼
index
actions
// 登錄
Login({ commit, state }, userInfo) {
return new Promise((resolve, reject) => {
login(userInfo).then(response => {
let token = response.data.token;
commit("SET_TOKEN", token);
sessionStorage.setItem("token", token); //獲取到新的token的時候賦值給sessionStorage
commit("SET_ISLOGIN", true); // 登錄成功修改store中的登錄狀態(tài)
resolve()
}).catch(error => {
reject(error)
})
})
},
路由
簡單介紹: 路由攔截就相當(dāng)于路由的"生命周期",在路由的不同時間段插入一個方法,可以在此時間段想要做什么事情,本次只在路由跳轉(zhuǎn)前搞事情,所以只使用router.beforeEach((to, from, next) => { // ... })即可,具體內(nèi)容官網(wǎng)都很詳細(xì)
main.js
router.beforeEach((to, from, next) => {
let isLogin = sessionStorage.getItem("isLogin");
let token = sessionStorage.getItem("token");
let id = sessionStorage.getItem("id");
if (to.meta.requireAuth) { // 判斷是否有權(quán)限
if (!store.state.isLogin && !isLogin && to.path !== "/login") { // store和sessionStorage中登錄狀態(tài)都為false并且跳轉(zhuǎn)到 不是登錄的頁面時 都強行跳轉(zhuǎn)到登錄頁面
next({
path: "/login",
});
} else if (!isLogin && to.path !== "/login") { // 已經(jīng)在登錄頁面進(jìn)入首頁的時候
sessionStorage.setItem("isLogin", store.state.isLogin);
next();
} else if (isLogin && to.path !== "/login") { // 登錄進(jìn)入后刷新頁面時
store.commit("SET_TOKEN", token);
store.commit("SET_ISLOGIN", isLogin);
store.commit("SET_ID", id);
next();
} else {
next();
}
}
else {
next();
}
});
坑
1.路由攔截我是寫在main.js文件中的,要注意 一定要寫在vue掛載的上面(new Vue)
2.當(dāng)點擊登錄的時候 actions中的登錄方法要早于路由攔截
3.退出的登錄的時候 不要忘記把sessionStorage里的變量刪除
希望本文可以給你提供一些幫助,這是我最高興的,覺得我有寫的不對或者有問題的地方也請幫我指正出來,大家互相幫助互相進(jìn)步!!!
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107073.html
摘要：提交提交數(shù)據(jù)，但頁面不跳轉(zhuǎn)，可以使用簡單方法提交表單頁面不跳轉(zhuǎn)提交頁面返回的數(shù)據(jù)顯示在中注意中的一定是你要指定要顯示返回結(jié)果的標(biāo)簽中的屬性注意可以放到中的任何位置特別注意可以放到中 1.提交form,action 提交數(shù)據(jù)，但頁面不跳轉(zhuǎn)，可以使用Iframe簡單方法 Form提交表單頁面不跳轉(zhuǎn)
摘要：提交提交數(shù)據(jù)，但頁面不跳轉(zhuǎn)，可以使用簡單方法提交表單頁面不跳轉(zhuǎn)提交頁面返回的數(shù)據(jù)顯示在中注意中的一定是你要指定要顯示返回結(jié)果的標(biāo)簽中的屬性注意可以放到中的任何位置特別注意可以放到中 1.提交form,action 提交數(shù)據(jù)，但頁面不跳轉(zhuǎn)，可以使用Iframe簡單方法 Form提交表單頁面不跳轉(zhuǎn)
摘要：在的項目中刷新功能你會怎么寫我之前一直用這個方法用戶體驗很不好，因為頁面會閃動一下刷新直到我發(fā)現(xiàn)了這個方法不過這個方法貌似有兼容問題，首先要確定一下你的版本，此方法適用原理此方法使用的是來控制的顯示或隱藏，從變?yōu)闀r，會重新渲染區(qū)域， 在vue的項目中刷新功能你會怎么寫？我之前一直用this.$router.go(0)這個方法用戶體驗很不好，因為頁面會閃動一下刷新直到我發(fā)現(xiàn)了這個方法 p...
摘要：文件上傳在不借助第三方的插件的情況下進(jìn)行文件上傳可利用表單對象表單是不存在瀏覽器的兼容性的，同時在被禁用的情況下也能進(jìn)行文件的傳輸，因此可以大膽使用。使用表單提交文件一個非常典型的應(yīng)用場景就是上傳圖片，但是頁面不刷新。 文件上傳 在不借助第三方的插件的情況下進(jìn)行文件上傳可利用： Form表單 FormData對象 Form表單是不存在瀏覽器的兼容性的，同時在js被禁用的情況下也能進(jìn)...
閱讀 3955·2021-11-17 09:33
閱讀 3296·2021-10-08 10:05
閱讀 3124·2021-09-22 15:36
閱讀 1151·2021-09-06 15:02
閱讀 2780·2019-08-29 12:45
閱讀 1599·2019-08-26 13:40
閱讀 3409·2019-08-26 13:37
閱讀 431·2019-08-26 13:37
