如果用户未经过身份验证,我需要将用户重定向到登录页面。我需要类似的东西route.beforeEach
在 Vue.js 中,理想情况下:
sapper.beforeRouteChange((to, from, next) => {
const isAuth = "[some session or token check]";
if (!isAuth) {
next('/login')
}
next()
})
I found Sapper - 受保护的路线(路线守卫) https://stackoverflow.com/questions/58153372/sapper-protected-routes-route-guard这个问题,但我认为这不足以满足我的需求。如果令牌或身份验证在运行时发生变化怎么办?或者它是否被反应性所覆盖?
Edit 1:我觉得this https://github.com/sveltejs/sapper/issues/30#issuecomment-514393015Sapper GitHub 上的问题解决了我的问题。
所以我把这段代码放在/src/routes/_layout.svelte
:
import AuthMiddleware from "../methods/authMiddleware.js";
import { goto, stores } from '@sapper/app';
const { page } = stores();
if (typeof window !== "undefined" && typeof document !== "undefined") {
page.subscribe(({ path, params, query }) => {
const from = window.location.pathname;
const redirect = (href) => { goto(href); }
AuthMiddleware.beforeChange(from, path, redirect, params, query);
})
}
这是authMiddleware.js
file:
export default class AuthMiddleware {
static beforeChange(from, to, redirect, params, query) {
if (!AuthMiddleware._isUserAuthenticated()) {
redirect("/login");
}
}
// ~
static _isUserAuthenticated() {
return true; // TODO: Implement
}
}
有关路由钩子的更多信息可以在这里找到
- https://github.com/sveltejs/sapper/issues/30 https://github.com/sveltejs/sapper/issues/30
- https://sapper.svelte.dev/docs/#Stores https://sapper.svelte.dev/docs/#Stores
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)