vue在路由中验证token是否存在的简单实现
更新时间：2019年11月11日 16:58:46 作者：sowhat_WLQ
今天小编就为大家分享一篇vue在路由中验证token是否存在的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1. 在router/index.js进行验证
2. 代码如下：
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/common/Login';
......
Vue.use(Router)
const router = new Router({
routes: [{
path: '/',
name: Login,
component: Login,
},
{
path: '/home',
component: Home,
meta: {
requiresAuth: true // 要求验证的页面,在此情况下其子页面也会被验证.
},
children: [{
path: '/paChong',
name: 'PaChong',
component: PaChong
}
]
}
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) { // 哪些需要验证
if (!sessionStorage.getItem("token")) { // token存在条件
next({
path: '/', // 验证失败要跳转的页面
query: {
redirect: to.fullPath // 要传的参数
}
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
export default router
以上这篇vue在路由中验证token是否存在的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了基于Vue组件化的日期联动选择器的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-11-11
Vue组件传值方式(props属性,父到子,子到父,兄弟传值)
这篇文章主要介绍了Vue组件传值方式(props属性,父到子,子到父,兄弟传值),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue清空form对象的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue-element-admin如何转换成中文问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue中数据不响应的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用
这篇文章主要介绍了Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要为大家详细介绍了vue实现简单图片上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
本篇文章主要介绍了Vue2.0表单校验组件vee-validate的使用详解，详细的介绍了vee-validate使用教程。具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
Vue3中provide和inject作用和场景是顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信,本文通过实例介绍Vue3 provide和inject的相关知识,感兴趣的朋友一起看看吧2023-11-11
最新评论