页面刷新时 Vue Router Guard 不工作答案

【问题标题】：Vue Router Gaurd Not Working When Page Refreshes页面刷新时 Vue Router Guard 不工作
【发布时间】：2021-04-20 17:34:56
【问题描述】：

我正在尝试使用路由器保护来保护某些页面。当用户访问时，应该在他们尝试访问这些页面时要求他们登录。当我在应用程序中时它可以工作，但是当用户刷新页面，或者只是简单地复制 URL 并将其粘贴到浏览器上并在那里登录时，用户应该仍然可以获得这些页面。但现在情况并非如此。它会抛出此错误：[vue-router] 路由导航期间未捕获的错误：如果用户尝试访问受保护的页面，我需要将用户重定向到登录页面，并且如果他们已登录，也给他们这个页面。

beforeEnter: (to, from, next) => {
    if (!store.state.isUserLoggedIn) {
    next({
    path: '/login', // back to safety
    query: {
    redirectFrom: to.fullPath
    }
    })
    // }else if(!localStorage.getItem('userLoggedIn')){
    // next()
     } else {
    next()

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

最好的做法和你应该做的是使用Navigation Guards。

index.js（路由器文件）

const ifNotAuthenticated = (to, from, next) => {
    if (!store.state. isUserLoggedIn) {
        next();
        return;
    }
    next("/");
};

const ifAuthenticated = (to, from, next) => {
    if (store.state. isUserLoggedIn) {
        next();
        return;
    }
    next("/login");
};

const routes =[
    {
        path: "/home",
        name: "Home",
        component: Home,
        beforeEnter: ifAuthenticated,
      },
    {
        path: "/login",
        name: "Login",
        component: Login,
        beforeEnter: ifNotAuthenticated,
      }
]

beforeEnter 这里是了解经过身份验证的用户是否应该进入下一页或登录的关键。

【讨论】：

还是同样的问题。如果用户已登录，并且用户刷新页面，则该页面不会显示。这是我的问题。预计用户有时可能会触发刷新，或者来自外部源。如果用户仍然登录，我还希望用户能够继续查看这些页面。

【解决方案2】：

在仔细研究了我遇到的错误后，我意识到当页面刷新或用户直接导航到 URL 时，路由器守卫甚至没有看到持久的 Vuex 状态。所以我决定切换路由器守卫分析的变量，以查看用户是否登录到 localStorage 变量。即便如此，当它是一个布尔变量时，我也遇到了问题。我将其更改为 int，1 表示登录状态，0 表示注销状态。这完美无缺。以防万一有人遇到这个问题。

【讨论】：