受保护路由中的重定向问题 - Vue js Router

Question

我的 vue router.js 文件中有这条路线。

routes: [{
      path: "/",
      component: Home,
      beforeEnter: (to, from, next) => {
        if (!store.state.is_login) {
          next('/login')
        }
        next()
      }
    }]

如果 store.state.is_login === true

，我使用 beforeEnter 选项重定向用户

第一个问题： 因此，当我在浏览器中输入 url 时，我将重定向到 /login 页面。这很好用。但是当我单击徽标按钮时，此 beforeEnter 功能不起作用。 这是我使用的按钮：

<router-link to="/" class="bp-logo"><Logo />home</router-link>

第二个问题是：

1. is_login 在我的 store.state.is_login 中
2. 我将令牌存储在 localStorage 中
3. user_info 在 store.state.user 中

问题：

条件 1：如果 !is_login 重定向到 /login 。

条件 2：如果令牌存在并且 !is_login => 请求使用令牌后端 /user 并获取 user_info 并将 is_login 设置为 true。

条件 3：如果 !is_login && !token 重定向到 /login

Answer 1

不知怎的，我想通了。第一个问题是当您渲染路线时。然后您单击以再次到达该路线，功能 router.beforeEach 不会触发。所以我在文档中找到了另一种方法。

routes: [{
      path: "/",
      component: Home,
      beforeEnter: isAuthenticated,
    }]

这是我处理这两个问题的自定义函数。

const isAuthenticated = (to, from, next) => {
  if (!store.state.is_login) {
    if ((localStorage.getItem('token')) && (lodash.isEmpty(store.state.user))) {
      let headers = {
        headers: {
          Authorization: localStorage.getItem("token"),
          "Access-Control-Allow-Origin": "*"
        }
      };
      axios
        .get(`${store.state.api}admin/user`, headers)
        .then(response => {
          store.state.user = response.data.user;
          store.state.is_login = true;
          next("/");
        })
        .catch(error => {
          store.state.Error = error;
          next('/login')
        });
    }
    next('/login')
    return
  }
  next()
  return
}

Answer 2

您需要更改您的beforeEnter 方法才能访问商店实例。改写如下：

beforeEnter: (to, from, next) => {
        if (!this.$store.state.is_login) {
          next('/login')
        }
        next()
      }