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使用jsmind实现生成脑图的示例代码

    Vue使用jsmind实现生成脑图的示例代码

    这篇文章主要为大家详细介绍了Vue如何使用jsmind实现生成脑图,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2024-03-03
  • 详解​Vue虚拟DOM如何提高前端开发效率

    详解​Vue虚拟DOM如何提高前端开发效率

    这篇文章主要为大家介绍了详解​Vue虚拟DOM如何提高前端开发效率,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • vue中如何动态添加样式

    vue中如何动态添加样式

    这篇文章主要介绍了vue中如何动态添加样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue实现开关按钮拖拽效果

    Vue实现开关按钮拖拽效果

    这篇文章主要为大家详细介绍了Vue实现开关按钮拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • element日期组件实现只能选择小时或分钟

    element日期组件实现只能选择小时或分钟

    本文主要介绍了element日期组件实现只能选择小时或分钟,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • vue类名如何获取动态生成的元素

    vue类名如何获取动态生成的元素

    这篇文章主要介绍了vue类名如何获取动态生成的元素,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Webpack和Vite的区别小结

    Webpack和Vite的区别小结

    本文主要介绍了Webpack和Vite的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • npm install报错缺少python问题及解决

    npm install报错缺少python问题及解决

    这篇文章主要介绍了npm install报错缺少python问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • axios的拦截请求与响应方法

    axios的拦截请求与响应方法

    今天小编就为大家分享一篇axios的拦截请求与响应方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    这篇文章主要介绍了vue项目打包发布后接口报405错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论