在受保护的路由中重定向时出现问题-Vue js路由器

Question

我的 vue 路由器中有这条路由.js文件.

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

我使用 beforeEnter 选项重定向用户，如果store.state.is_login === true

第一个问题:所以当我在浏览器中输入网址时，我会重定向到/登录页面。这很好。但是当我单击徽标按钮时，这个beforeEnter功能不起作用。这是我的按钮，使用:

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

第二个问题是:

1. is_login在我的store.state。is_login
2. 我正在本地存储令牌
3. user_info在store.state.user中

问题:

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

条件2：如果令牌存在！is_login=

条件3：如果！is_登录

Answer 1

我不知何故想通了。第一个问题是当你渲染一个路由时，你被点击再次到达该路由的功能路由器。之前每个不触发。所以我在文档中找到了另一种方法。

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

您需要更改您的befor起初方法来访问存储实例。像这样重写：

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