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-cli3.0+element-ui上传组件el-upload的使用

    vue-cli3.0+element-ui上传组件el-upload的使用

    这篇文章主要介绍了vue-cli3.0+element-ui上传组件el-upload的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue.prototype详解及使用方式

    Vue.prototype详解及使用方式

    这篇文章主要介绍了Vue.prototype详解及使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue如何实现跨页面传递与接收数组并赋值

    vue如何实现跨页面传递与接收数组并赋值

    这篇文章主要介绍了vue如何实现跨页面传递与接收数组并赋值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue2中插槽(slot)的基本使用规范

    vue2中插槽(slot)的基本使用规范

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性,下面这篇文章主要给大家介绍了关于vue2中插槽(slot)的基本使用规范的相关资料,需要的朋友可以参考下
    2022-03-03
  • 浅析vue中的provide / inject 有什么用处

    浅析vue中的provide / inject 有什么用处

    这篇文章主要介绍了vue中的provide / inject 有什么用处,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • 基于VUE实现简单的学生信息管理系统

    基于VUE实现简单的学生信息管理系统

    这篇文章主要介绍了VUE实现一个简单的学生信息管理系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • vue实现鼠标经过动画

    vue实现鼠标经过动画

    这篇文章主要为大家详细介绍了vue实现鼠标经过动画的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • Vue中使用Ueditor的示例详解

    Vue中使用Ueditor的示例详解

    这篇文章主要介绍了Vue中使用Ueditor的方法,本文通过实例给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue踩坑记录之src的动态绑定赋值问题

    vue踩坑记录之src的动态绑定赋值问题

    这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue3路由新玩法useRoute和useRouter详解

    vue3路由新玩法useRoute和useRouter详解

    这篇文章主要介绍了vue3路由新玩法useRoute和useRouter,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论