vue中如何实现登录注册及token验证
这篇文章主要介绍了vue中如何实现登录注册及token验证,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
具体实现代码如下:
1. 利用router.beforeEach钩子, 判断目标路由是否携带了相关meta信息
// router.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: require('./views/Home'), meta: { requiresAuth: true } }, ] const router = new VueRouter({ routes: routes }) router.beforeEach((to, from, next) => { let token = window.localStorage.getItem('token') if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } }) export default router
2. watch route对象。原理同上。
<script> // App.vue export default { watch:{ '$route':function(to,from){ let token = window.localStorage.getItem('token'); if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } } } } </script>
感谢你能够认真阅读完这篇文章,希望小编分享的“vue中如何实现登录注册及token验证”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注行业资讯频道,更多相关知识等着你来学习!