Javascript 路由不工作的身份验证中间件

我将Vue、Vuex与类星体一起使用（类星体可能与此无关，也可能与此无关）

这是我的第一次申请，所以我不确定我做的事情是否正确

下面是我的路线的代码片段

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

/*
 * If not building with SSR mode, you can
 * directly export the Router instantiation
 */

const routes = [

  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    beforeEnter: ifAuthenticated ,
    children: [
      { path: '', component: () => import('./../container/Index.vue') }
    ]
  }
]

const ifNotAuthenticated = (to, from, next) => {
  console.log("here")
  if (!store.getters.isAuthenticated)  return next()
  else  next('/')
}

const ifAuthenticated = (to, from, next) => {
  if (store.getters.isAuthenticated) return next()
  else  next('/login')
}


export default function (store) {
  const Router = new VueRouter({
    mode: 'history', 
    routes,

    // Leave these as is and change from quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    mode: process.env.VUE_ROUTER_MODE,
    base: process.env.VUE_ROUTER_BASE
  })

      return Router
}

请注意这行代码

const ifNotAuthenticated = (to, from, next) => {
  console.log("here")
  if (!store.getters.isAuthenticated)  return next()
  else  next('/')
}

有了这一点，我希望能够进行客户端身份验证，并基于我对客户端身份验证的理解/阅读

我想当我做这样的事情时会被称为

beforeEnter: ifAuthenticated ,

但不幸的是，该函数没有被调用（因为它没有任何控制台日志记录）

---

你知道我可能做错了什么吗？

如果代码中的任何地方没有经过验证，你就不会调用

，因此你不会看到控制台日志消息

在每次检查身份验证之前使用global
beforeach
guard可能更容易、更好。下面是一个非常简单的示例代码，说明如何在路由配置中使用
meta
数据来完成此操作

我在代码中添加了注释来解释事情

我建议您阅读Vue路由器文档。
这也是一个很好的解释更详细的事情

const路由=[
{
路径：“/dashboard”，
名称：“仪表板”，
组件：（）=>导入（“path/to/Dashboard.vue”），
//将这样的元数据添加到您的私有路由
//提示：如果你有很多私人路线，你可以添加
//meta:{public:true}到公共路由并生成
//默认情况下，所有其他路由都是专用的。
//在这种情况下，您需要在beforeach中更改逻辑
//下面。
meta:{requireAuth:true}，
},
];
导出默认功能（存储）{
常量路由器=新的VueRouter({
模式：“历史”，
路线，
//其他东西。。。
});
路由器.beforeach（（到、从、下一个）=>{
//查看是否有任何匹配的路由具有meta“requiresAuth”
if（to.matched.some（route=>route.meta.requireAuth））{
//是此路由需要身份验证。请查看用户是否经过身份验证。
if（store.getters.isAuthenticated）{
//用户已通过身份验证，我们允许访问。
next（）；
}否则{
//用户未通过身份验证。我们可以将其重定向到
//我们的登录页面。或者我们想要的任何地方。
下一步（“/login”）；
}
}否则{
next（）；
}
});
返回路由器；
}
如果代码中的任何地方未经验证，则未调用
，因此您将看不到控制台日志消息

在每次检查身份验证之前使用global
beforeach
guard可能更容易、更好。下面是一个非常简单的示例代码，说明如何在路由配置中使用
meta
数据来完成此操作

我在代码中添加了注释来解释事情

我建议您阅读Vue路由器文档。
这也是一个很好的解释更详细的事情

const路由=[
{
路径：“/dashboard”，
名称：“仪表板”，
组件：（）=>导入（“path/to/Dashboard.vue”），
//将这样的元数据添加到您的私有路由
//提示：如果你有很多私人路线，你可以添加
//meta:{public:true}到公共路由并生成
//默认情况下，所有其他路由都是专用的。
//在这种情况下，您需要在beforeach中更改逻辑
//下面。
meta:{requireAuth:true}，
},
];
导出默认功能（存储）{
常量路由器=新的VueRouter({
模式：“历史”，
路线，
//其他东西。。。
});
路由器.beforeach（（到、从、下一个）=>{
//查看是否有任何匹配的路由具有meta“requiresAuth”
if（to.matched.some（route=>route.meta.requireAuth））{
//是此路由需要身份验证。请查看用户是否经过身份验证。
if（store.getters.isAuthenticated）{
//用户已通过身份验证，我们允许访问。
next（）；
}否则{
//用户未通过身份验证。我们可以将其重定向到
//我们的登录页面。或者我们想要的任何地方。
下一步（“/login”）；
}
}否则{
next（）；
}
});
返回路由器；
}