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