亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue 路由器重定向到 404 而不是登錄頁面 (Nuxt.js)

Vue 路由器重定向到 404 而不是登錄頁面 (Nuxt.js)

江戶川亂折騰 2023-03-03 10:27:39
我在帶有 Vue 路由器的 Nuxt.js 項目中遇到了一個奇怪的行為:我正在嘗試使用放置在 route.js 插件中的路由守衛,它在 nuxt.config.js 插件部分中注冊,看起來像這:  app.router.beforeEach((to, from, next) => {    to.name !== "login" && app.store.getters["session/token"] === ""      ? next({ name: "login" })      : next();  });這個想法是,如果用戶刷新頁面,他會丟失存儲在 Vuex 會話模塊中的令牌,因此他應該被重定向到登錄頁面。奇怪的行為是——路由守衛實際上工作,它重定向到 /login url,但它顯示 404 頁面——如果我再次刷新頁面,它正確地重定向到 /login url/頁面。我也嘗試過直接推送到登錄頁面app.router.push({ name: "login" }),但無濟于事。我所做的解決方法是在 404 頁面中添加重定向:  beforeCreate() {    this.$router.push({ name: "login" });  },但我對此并不滿意...有誰知道發生了什么事?
查看完整描述

2 回答

?
慕斯王

TA貢獻1864條經驗 獲得超2個贊

前段時間,我在一個 Vue.JS 項目中創建了類似的行為。這是我的代碼,也許它可以幫助您找到錯誤。


// checks if user is authenticated before displaying the page

// if not, reroutes to the login page


router.beforeEach((to, from, next) => {

  if (to.matched.some(record => record.meta.requiresAuth)) {

    if (store.getters.isAuthenticated) {

      next();

      return;

    }

    next('/login');

  } else {

    next();

  }

});

元字段定義是否需要身份驗證。在下面的代碼片段中,您可以看到它是如何使用的。


const routes = [

  {

    path: '/',

    component: DashboardLayout,

    redirect: '/login',

    children: [

      {

        path: 'dashboard',

        name: 'Dashboard',

        component: Dashboard,

        meta: {

          requiresAuth: true,

        },

      }

    ]

  }

];


(希望括號是正確的)


查看完整回答
反對 回復 2023-03-03
?
繁星點點滴滴

TA貢獻1803條經驗 獲得超3個贊

在這一點上,我認為沒有人有興趣回答我的問題,所以我將只發布我所做的解決方法:

在應用程序的 404 頁面中,注釋掉整個模板內容(因此,如果用戶連接速度慢并被重定向到 404,他將看不到任何內容)。我還在之前創建的生命周期掛鉤中添加了一個重定向:

  beforeCreate() {
      this.$router.push({ name: "login" });
  },

這樣,用戶會自動重定向到登錄名而不會出現任何問題。


查看完整回答
反對 回復 2023-03-03
  • 2 回答
  • 0 關注
  • 219 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號