英文:
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 routerrouter.beforeEach((to, from) => {const hasToken = localStorage.getItem('token');if (!hasToken) {return '/login'; // Redirect to the login page}});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论