在路由进入Vue路由器之前检查身份验证令牌有效 [英] Checking auth token valid before route enter in Vue router

问题描述

我有一个简单的用例，我的应用程序使用 vue-router 和 vuex.然后 store 包含一个 user 对象，它以 null 开头.从服务器验证用户后，它会发回一个 user 对象，该对象包含一个 JWT 身份验证令牌，该令牌分配给店铺.现在让我们假设用户在 3 小时后回来并尝试访问路线或执行任何其他操作，考虑到 auth 令牌到那时已经过期，检查它的最佳方法是什么(需要调用 axiospost 检查它)并将用户重定向到 login 页面.我的应用程序将有大量组件，所以我知道我可以编写逻辑来检查每个组件的 mounted 钩子中的有效令牌，但这意味着重复所有组件.此外，我不想使用 beforeEach 导航守卫，因为我无法向用户显示任何视觉反馈，例如 checking... 或 loading....

I have a simple use case, where my application is using vue-router and vuex. Then store contains a user object which is null in the beginning. After the user is validated from the server it sends back an user object which contains a JWT auth token which is assigned to the user object in the store. Now lets assume that the user came back after 3 hours and tried to visit a route or perform any other action, considering that the auth token has expired by then, what would be the best way to check that(need to call axios post to check it) and redirect user to the login page. My app will have loads of components so I know I can write logic to check the token valid in the mounted hook of each component but that would mean repeating it all of the components. Also I don't want to use the beforeEach navigation guard because I cannot show any visual feedback to the user like checking... or loading....

推荐答案

尝试 Vue.JS Mixins

您可以定义一个全局 Mixin 并通过 Vue.use(myMixin) 使用它 - 然后所有组件都将继承这个 mixin.如果你在 mixin 上定义了一个 mounted 或者更好的 activated 钩子，它会在每个组件上被调用.

Try Vue.JS Mixins

You can define a Global Mixin and use it via Vue.use(myMixin) - then all Components will inherit this mixin. If you define a mounted or probably better activated hook on the mixin, it will be called on every component.

在那里你可以使用组件可以做的一切 - this 将指向你的组件.并且如果组件本身也定义了一个钩子，同类型的 mixin 钩子会在组件自己的钩子之前运行.

There you can use everything a component can do - this will point to your component. And if the component also defines a hook itself, the mixin hook of the same type will run before the components own hook.

我们使用了一个稍微不同的解决方案——我们有一个单独的组件来处理与登录相关的所有事情，它存在于父 index.html 中的路由器视图之外.该组件始终处于活动状态，可以隐藏 div 路由器视图并覆盖加载消息或登录屏幕.对于 Intranet 应用程序，只要浏览器保持打开状态，该组件还将使用轮询来保持会话处于活动状态.

We used a little different solution - we have a single component which handles everything login-related, which exists outside of the router-view in the parent index.html. This component is always active and can hide the div router-view and overlay a loading message or a login-screen. For an intranet-application this component will also use polling to keep the session alive as long as the browser stays open.

您可以将路由器导航加载到此组件.- 因此，想要触发路由器导航的子组件只需设置一个全局响应属性 navigateTo，由顶级身份验证组件监视.这将触发身份验证检查，可能是登录工作流，然后顶级组件将调用 $router.push() 使用这种方法，您可以完全控制任何导航.

You can load of your router-navigation to this component. - So a child-component which wants to trigger a router-navigation just sets a global reactive property navigateTo which is watched by the top level authentication component. This will trigger an authentication check, possibly a login-workflow and after that the top-level component will call $router.push() With this approach you have complete control over any navigation.

这篇关于在路由进入Vue路由器之前检查身份验证令牌有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！