vue 利用路由守卫判断是否登录的方法


Posted in Javascript onSeptember 29, 2018

1.在router下的index.js 路由文件下,引入相关需要文件;

import Vue from 'vue'

import Router from 'vue-router'
import {LOGIN} from '../common/js/islogin'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/page/Login'
import Index from '@/page/index/index'Vue.use(Router);

2.配置相关路由

const router = new Router({

 routes: [
 {
  path: '/',
  redirect: '/login'
 },
 {
  path: '/login',
  component: Login
 },
 {
  path: '/index',
  meta: {
  requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
  },
  component: Index
 }
 ]
});

3.路由配置完后,根据需要登录的页面判断路由跳转

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) {   //如果需要跳转 ,往下走(1)
 if (true) {   //判断是否登录过,如果有登陆过,说明有token,或者token未过期,可以跳过登录(2)
  if (to.path === '/login') { //判断下一个路由是否为要验证的路由(3)
  next('/index');   // 如果是直接跳到首页,
  } else {    //如果该路由不需要验证,那么直接往后走
  next();
  }
 } else {
  console.log('没有');  //如果没有登陆过,或者token 过期, 那么跳转到登录页
  next('/login');
 }
 } else {       //不需要跳转,直接往下走
 next();
 }
});export default router;

以上这篇vue 利用路由守卫判断是否登录的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
async/await优雅的错误处理方法总结
Jan 30 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 #Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 #Javascript
iview同时验证多个表单问题总结
Sep 29 #Javascript
浅谈关于iview表单验证的问题
Sep 29 #Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 #Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
You might like
php验证是否是md5编码的简单代码
2014/04/01 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
jquery实现鼠标滑过小图时显示大图的方法
2015/01/14 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
基于Python __dict__与dir()的区别详解
2017/10/30 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
体育教师自荐信范文
2013/12/16 职场文书
业务部经理岗位职责
2014/01/04 职场文书
上班早退检讨书
2014/01/09 职场文书
军神教学反思
2014/02/04 职场文书
志愿者活动总结
2014/04/28 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers