英文:
How to protect routes in vuejs using vuex
问题
如何在全局范围内保护路由，而不是使用这种方式，这适用于默认情况，并将没有令牌的用户重定向到登录页
这是我如何获取我的令牌
我在我的 Vuex 存储中获取令牌
英文:
How can I protect the routes globally instead of using this, this works on default and redirects users without token to login
beforeRouteEnter(to, from, next) {
const hasToken = localStorage.getItem('token');
if (!hasToken) {
next('/login'); // Redirect to the login page
} else {
next();
}
},
This is my how I get my token
created() {
this.getTokenFromStorage();
},
computed: {
...mapGetters(['currentUser', 'error', 'getToken']),
},
methods: {
...mapActions(['getUser', 'getTokenFromStorage']),
},
I get the token in my Vuex store
How can I just use my getToken and access it globally in Vue
答案1
得分: 2
你可以使用Vue Router中的导航守卫（Navigation Guards）来实现这一功能。这里是文档链接。
const router = createRouter({ ... });
// 在路由器上使用`beforeEach`导航守卫
router.beforeEach((to, from) => {
const hasToken = localStorage.getItem('token');
if (!hasToken) {
return '/login'; // 重定向到登录页面
}
});
英文:
For that you can use Navigation Guards in Vue Router. Here's the documentation link.
const router = createRouter({ ... });
// use `beforeEach` navigation guard on router
router.beforeEach((to, from) => {
const hasToken = localStorage.getItem('token');
if (!hasToken) {
return '/login'; // Redirect to the login page
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论