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 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
妙用Jquery的val()方法
Jun 27 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
javascript中var的重要性分析
Feb 11 Javascript
js select实现省市区联动选择
Apr 17 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
js定时器实现倒计时效果
Nov 05 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php setcookie(name, value, expires, path, domain, secure) 参数详解
2013/06/28 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
jQuery 开发者应该注意的9个错误
2012/05/03 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
javascript this详细介绍
2016/09/19 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
历史系自荐信范文
2013/12/24 职场文书
廉政教育心得体会
2014/01/01 职场文书
施工员岗位职责
2014/03/16 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP