資訊專欄INFORMATION COLUMN
摘要：先講講這個功能的實現(xiàn)場景吧，我們小組使用全家桶實現(xiàn)了一個單頁面應用，最初就考慮對登錄狀態(tài)做限制。比如登錄后不能后退到登錄頁面，退出到登錄頁面后，不能后退剛剛登錄的頁面。現(xiàn)在直接訪問那些只有登錄后才能訪問的面，就直接跳轉(zhuǎn)到了登錄頁面了。
這是我做前端一來的第一篇文章，都不知道該怎么開始了。那就直接奔主題吧。先講講這個功能的實現(xiàn)場景吧，我們小組使用vue全家桶實現(xiàn)了一個單頁面應用，最初就考慮對登錄狀態(tài)做限制。比如登錄后不能后退到登錄頁面，退出到登錄頁面后，不能后退剛剛登錄的頁面。在main.js中：
new Vue({
store,
router
}).$mount("#app")
router.beforeEach((to, from, next) => {
window.scrollTo(0, 0)
console.log(1234)
if (!to.meta.requiresAuth) {
if (!store.state.collectItems.bAuth) {
next({
path: "/"
// query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
if (store.state.collectItems.bAuth && to.fullPath === "/") {
console.log()
next(false)
return
}
next()
}
})
對那些是登錄才能訪問的，那些是沒有登錄就可以直接訪問的，都做限制。這些功能都是實現(xiàn)的沒有問題的。但是發(fā)現(xiàn)了一個問題就是，但是發(fā)現(xiàn)了一個問題就是大家直接在瀏覽器的地址欄輸入一個登錄后才能訪問的頁面，雖然不能訪問到頁面，但是頁面會卡在這里不動。原本設置的的路由跳轉(zhuǎn)根本就沒有起到作用。后來發(fā)現(xiàn)，因為是這塊的路由根本就沒有發(fā)揮作用的時候，頁面就已經(jīng)報錯了。有一天突然和我們小組的妹子討論的時候，突然提到能不能在頁面渲染先設置一個路由呢，于是就在 new Vue實例前面加了一個router的判斷：
router.beforeEach((to, from, next) => {
if (to.fullPath !== "/") {
next({
path: "/"
})
return
}
next()
})
瞬間之前的問題解決了?，F(xiàn)在直接訪問那些只有登錄后才能訪問的面，就直接跳轉(zhuǎn)到了登錄頁面了。
整理后的代碼：
router.beforeEach((to, from, next) => {
if (to.fullPath !== "/") {
next({
path: "/"
})
return
}
next()
})
new Vue({
store,
router
}).$mount("#app")
router.beforeEach((to, from, next) => {
window.scrollTo(0, 0)
console.log(1234)
if (!to.meta.requiresAuth) {
if (!store.state.collectItems.bAuth) {
next({
path: "/"
// query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
if (store.state.collectItems.bAuth && to.fullPath === "/") {
console.log()
next(false)
return
}
next()
}
})
不對的地方還望大家指點，謝謝！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82506.html
摘要：用存儲用戶路由守衛(wèi)路由中設置的字段就在當中每次跳轉(zhuǎn)的路徑登錄狀態(tài)下訪問頁面會跳到如果沒有訪問任何頁面。一個簡單的保存登錄狀態(tài)的小。 Vue項目中實現(xiàn)用戶登錄及token驗證 先說一下我的實現(xiàn)步驟： 使用easy-mock新建登錄接口，模擬用戶數(shù)據(jù) 使用axios請求登錄接口，匹配賬號和密碼 賬號密碼驗證后， 拿到token，將token存儲到sessionStorage中，并跳轉(zhuǎn)到首...
摘要：學習筆記狀態(tài)管理與狀態(tài)管理與非父子組件跨級組件和兄弟組件通信時，使用了中央事件總線的一個方法，用來觸發(fā)和接收事件，進一步起到通信的作用。倉庫包含了應用的數(shù)據(jù)狀態(tài)和操作過程。新建文件，并寫入的配置，會依賴此配置文件來使用編譯代碼。 學習筆記：狀態(tài)管理與Vuex 狀態(tài)管理與Vuex 非父子組件（跨級組件和兄弟組件）通信時，使用了bus（中央事件總線）的一個方法，用來觸發(fā)和接收事件，進一步...
閱讀 2843·2021-09-10 10:50
閱讀 2198·2019-08-29 16:06
閱讀 3204·2019-08-29 11:02
閱讀 1104·2019-08-26 14:04
閱讀 2815·2019-08-26 13:24
閱讀 2310·2019-08-26 12:16
閱讀 556·2019-08-26 10:29
閱讀 3104·2019-08-23 18:33
