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的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JavaScript鼠标悬停事件用法解析
May 15 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 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
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
php解决安全问题的方法实例
2019/09/19 PHP
javascript 模拟点击广告
2010/01/02 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
vuex的简单使用教程
2018/02/02 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
Python扩展内置类型详解
2018/03/26 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python plotly画柱状图代码实例
2019/12/13 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
大学生旷课检讨书
2014/01/22 职场文书
销售经理岗位职责
2014/03/16 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
植物生产学专业求职信
2014/08/08 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
信用卡工作证明范本
2015/06/19 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
Python数据结构之队列详解
2022/03/21 Python