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 相关文章推荐
判断是否输入完毕再激活提交按钮
Jun 26 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
一段实用的php验证码函数
2016/05/19 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
javascript 写类方式之三
2009/07/05 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
javascript常用的方法整理
2015/08/20 Javascript
JavaScrip常见的一些算法总结
2015/12/28 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
实现一个完整的Node.js RESTful API的示例
2017/09/29 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python处理二进制数据的方法
2015/06/03 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
顶岗实习接收函
2014/01/09 职场文书
旷课检讨书2000字
2014/01/14 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书