vue在路由中验证token是否存在的简单实现


Posted in Javascript onNovember 11, 2019

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是否存在的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
JavaScript & jQuery完美判断图片是否加载完毕
Jan 08 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
详解jquery和vue对比
Apr 16 jQuery
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
vuex存储token示例
Nov 11 #Javascript
Vuex实现数据增加和删除功能
Nov 11 #Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 #Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 #Javascript
使用vuex存储用户信息到localStorage的实例
Nov 11 #Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 #Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 #Javascript
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
一段实时更新的时间代码
2006/07/07 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
js实现日期级联效果
2014/01/23 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
JS判断字符串包含的方法
2015/05/05 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python实现视频下载功能
2017/03/14 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
Django中间件工作流程及写法实例代码
2018/02/06 Python
python处理csv中的空值方法
2018/06/22 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
澳大利亚相机之家:Camera House
2017/11/30 全球购物
美国优质马术服装购买网站:Breeches.com
2019/12/16 全球购物
幼儿园课题实施方案
2014/05/14 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
初中英语教学随笔
2015/08/15 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
java实现对Hadoop的操作
2021/07/01 Java/Android
frg-100简单操作(设置)说明
2022/04/05 无线电