vue实现未登录跳转到登录页面的方法


Posted in Javascript onJuly 17, 2018

环境:vue 2.9.3; webpack;vue-router

目的:实现未登录跳转

例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给本地缓存存入的token判断,如果没有就跳转到登录页面,有的话就打开。

图示:

1、直接在url地址栏输入http://127.0.0.1:9000/#/home,但是页面会直接跳转到登录页,而且会带上参数。

vue实现未登录跳转到登录页面的方法

vue实现未登录跳转到登录页面的方法

--------------------------------------------分割线----------------------------------------------

vue-router需要安装

首先配置路由

/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
 routes: [
  {
   path: '/',// 登录
   name: 'Login',
   component: resolve => require(['@/PACS/pages/Login'],resolve)
  },{
   path: '/home',
   name: 'Home',
   meta: {
    requireAuth: true, // 判断是否需要登录
   },
   component: resolve => require(['@/PACS/pages/Home'],resolve)
  } 
  ]
})
 ## 增加了字段 requireAuth 用来判断该路由是否需要登录。

然后配置main.js

// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限
  console.log('需要登录');
  if (localStorage.token) { // 判断当前的token是否存在 ; 登录存入的token
   next();
  }
  else {
   next({
    path: '/',
    query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
   })
  }
 }
 else {
  next();
 }
});

这里是登录时存入的token

vue实现未登录跳转到登录页面的方法

##这样的话登录时就会直接跳转到登录页面。

实现登录成功后再跳回开始输入的页面,就要用到后面传递的值了。

vue实现未登录跳转到登录页面的方法

vue实现未登录跳转到登录页面的方法

如果包含redirect就跳转到刚刚输入的页面。

注意:如果将用户数据保存到localstorage是不合理的,这里只是给出一种思路,如果登陆之后不清空浏览器数据,token一直存在的,判断就会失效。

总结

以上所述是小编给大家介绍的vue实现未登录跳转到登录页面,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
Node.js返回JSONP详解
May 18 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
详解从react转职到vue开发的项目准备
Jan 14 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 #Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 #Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 #Javascript
微信小程序倒计时功能实例代码
Jul 17 #Javascript
详解vue+webpack+express中间件接口使用
Jul 17 #Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 #Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 #Javascript
You might like
杏林同学录(一)
2006/10/09 PHP
php实现的在线人员函数库
2008/04/09 PHP
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php实现计数器方法小结
2015/01/05 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python3访问字典里的值实例方法
2020/11/18 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
TCP/IP的分层模型
2013/10/27 面试题
美德好少年主要事迹
2014/01/29 职场文书
马智宇结婚主持词
2014/04/01 职场文书
军训拉歌口号
2014/06/13 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
老龙头导游词
2015/02/11 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
QT与javascript交互数据的实现
2021/05/26 Javascript