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 相关文章推荐
学习ExtJS fit布局使用说明
Oct 08 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
Nov 23 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 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无限极分类实现方法分析
2019/07/04 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
2013/01/24 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
python根据文件大小打log日志
2014/10/09 Python
python实现简单购物商城
2016/05/21 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python实现简单猜数字游戏
2021/02/03 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
高一地理教学反思
2014/01/18 职场文书
我的老师教学反思
2014/05/01 职场文书
导师推荐信范文
2014/05/09 职场文书
土建施工员岗位职责
2014/07/16 职场文书
环保项目建议书
2014/08/26 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
80后婚前协议书范本
2014/10/24 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
预备党员党支部意见
2015/06/02 职场文书
长征观后感
2015/06/09 职场文书
基石观后感
2015/06/12 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
2019 入党申请书范文
2019/07/10 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python