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

Posted 2023-03-07

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

【英文标题】：problem in redirecting in guarded route - Vue js Router

【发布时间】：2019-10-31 00:15:37

【问题描述】：

我的 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>

第二个问题是：

is_login 在我的 store.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

【参考方案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.apiadmin/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

【参考方案2】：

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

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

【讨论】：

tnx 回复，但我的问题不是那个。我导入了 store .!this.$store.state.is_login 是未定义的

啊，这是未定义的，因为您尚未在 main.js 中声明商店。没有意识到你在做本地进口。您在控制台中遇到什么错误（如果有）？

tnx 你的回答很有帮助。