vue登录注册及token验证实现代码
更新时间：2017年12月14日 10:50:33 作者：亲爱的混蛋
在vue单页中，我们可以通过监控route对象，从中匹配信息去决定是否验证token，然后定义后续行为。下面通过实例代码给大家分享vue登录注册及token验证功能，需要的朋友参考下吧
在大多数网站中，实现登录注册都是结合本地存储cookie、localStorage和请求时验证token等技术。而对于某些功能页面，会尝试获取本地存储中的token进行判断，存在则可进入，否则跳到登录页或弹出登录框。
而在vue单页中，我们可以通过监控route对象，从中匹配信息去决定是否验证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验证实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了详解在vue-cli项目下简单使用mockjs模拟数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Vue实现下拉滚动加载数据的示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
vue-element-admin关闭eslint的校验方式
这篇文章主要介绍了vue-element-admin关闭eslint的校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本文主要介绍了Vue3中10多种组件通讯方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单，本文给大家分享个例子，给大家及时的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了Vue在启动时卡住了,启动不了的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在实际项目开发中,几乎每个组件中都会用到 axios 发起数据请求,下面这篇文章主要给大家总结介绍了关于Vue3全局配置axios的两种方式,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-01-01
自定义指令是 vue 中使用频率仅次于组件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子，接下来通过本文给大家详细介绍Vue指令工作原理实现方法，需要的朋友参考下吧2021-06-06
这篇文章主要介绍了vue项目如何配置public静态资源路径访问方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
文章介绍了Vue单页应用中出现404错误的原因,以及如何通过配置Nginx和使用Vue Router的hash模式来解决这个问题,同时,文章还简要解释了单页应用的概念及其优点和缺点,并讨论了Router的实现方式2024-12-12
最新评论