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选项重定向用户

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

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

第二个问题是：

is_login在我的商店中。state.is_login
我将令牌存储在localStorage中
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

您需要更改beforeEnter方法才能访问商店实例。像这样重写：

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

Answer 2

我想通了。第一个问题是在绘制路线时。然后单击以再次到达该路线，功能为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
}

防护路由中的重定向问题-Vue JS Router

2 个答案: