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 打印页面代码
Mar 24 Javascript
jquery插件validate验证的小例子
May 08 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 Javascript
小程序实现可拖动的悬浮按钮
Sep 07 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 Javascript
canvas实现贪食蛇的实践
Feb 15 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安全性漫谈
2012/06/28 PHP
PHP编程函数安全篇
2013/01/08 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
基于jQuery的js分页代码
2010/06/10 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
javascript实现连续赋值
2015/08/10 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python实现微信小程序自动回复
2018/09/10 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python db类用法说明
2020/07/07 Python
Python代码注释规范代码实例解析
2020/08/14 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
高中生期末评语大全
2014/01/28 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
幼儿园秋游感想
2014/03/12 职场文书
节约用水倡议书
2014/04/16 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
MySQL基础(一)
2021/04/05 MySQL
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers