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 相关文章推荐
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
Javascript实现基本运算器
Jul 15 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
推荐10款扩展Web表单的JS插件
Dec 25 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
Aug 27 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
基于Cesium绘制抛物弧线
Nov 18 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
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP的PSR规范中文版
2013/09/28 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP函数积累总结
2019/03/19 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
全面解析JavaScript中“&&”和“||”操作符(总结篇)
2016/07/18 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
python自动化生成IOS的图标
2018/11/13 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python 动态调用函数实例解析
2019/10/21 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Python实现手势识别
2020/10/21 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
python Pexpect模块的使用
2020/12/25 Python
活动志愿者自荐信
2014/01/27 职场文书
高中军训第一天感言
2014/03/06 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
党建工作汇报材料
2014/12/24 职场文书
给病人的慰问信
2015/03/23 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang