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 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
Node.js API详解之 console模块用法详解
May 12 Javascript
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
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
jQuery 查找元素操作实例小结
2019/10/02 jQuery
详解jQuery中的prop()使用方法
2020/01/05 jQuery
JS实现放烟花效果
2020/03/10 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python生成器generator用法实例分析
2015/06/04 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
安装docker-compose的两种最简方法
2019/07/30 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
利用css3制作3D样式按钮实现代码
2013/03/18 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
2016/02/29 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
2020/06/01 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
学期自我鉴定
2013/11/04 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
求职面试个人自我评价
2014/02/28 职场文书
2014年采购部工作总结
2014/11/20 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书