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 相关文章推荐
javascript实现实时输出当前的时间
Apr 27 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
React中Ref 的使用方法详解
Apr 28 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
使用Python+wxpy 找出微信里把你删除的好友实例
2019/02/21 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
班级安全教育实施方案
2014/02/23 职场文书
医德医风演讲稿
2014/05/20 职场文书
服务行业口号
2014/06/11 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers