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 相关文章推荐
Javascript中的delete介绍
Sep 02 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
Javascript中设置默认参数值示例
Sep 11 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
Puppet的一些技巧
Sep 17 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
javascript的几种写法总结
2016/09/30 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
Angular使用ng-messages与PHP进行表单数据验证
2016/12/28 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
在Python中移动目录结构的方法
2016/01/31 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
在python里协程使用同步锁Lock的实例
2019/02/19 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Python @property装饰器原理解析
2020/01/22 Python
Pytorch mask_select 函数的用法详解
2020/02/18 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
招商业务员岗位职责
2013/12/16 职场文书
部队领导证婚词
2014/01/12 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
机关党员公开承诺书
2014/08/30 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2015年人事工作总结范文
2015/04/09 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL