vue router 用户登陆功能的实例代码


Posted in Javascript onApril 24, 2019

有些路由页面需要用户登陆之后才能访问如(用户中心),如果用户没有登陆就访问这些页面的话就应该转换到登陆页面,登陆成功之后在进入该页面。

需要用到的知识点有:H5中的会话存储(sessionStorage)、vue-router路由前置操作、路由元信息(meta).

路由配置

在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆。

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/login",
      name: "login",
      component: () => import("./views/Login.vue")
    },
    {
      path: "/member",
      meta: {
        auth: true  // 用于判断当前路由是否需要登陆
      },
      component: () => import('./views/Member.vue')
    }
  ]
});

全局前置操作

// 登陆验证
const Token = "XH-TOKEN";
router.beforeEach((to, from, next) => {
  let validator = typeof to.meta.auth == "undefined" || !to.meta.auth || sessionStorage.getItem(Token);
  let result = validator ? {} : {
    name: "login",// 跳转到命名路由
    query: {
      url: to.fullPath  // 做一个来源页面,用于登陆成功之后跳转
    }
  };
  next(result);
});

注意:登陆成功之后要用 sesionStorage.setItem设置会话值

总结

以上所述是小编给大家介绍的vue router 用户登陆功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
javascript css float属性的特殊写法
Nov 13 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
echarts饼图扇区添加点击事件的实例
Oct 16 Javascript
js前端导出Excel的方法
Nov 01 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 #Javascript
vue.js多页面开发环境搭建过程
Apr 24 #Javascript
小程序实现订单倒计时功能
Apr 23 #Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 #Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 #Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 #Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 #Javascript
You might like
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
Element Collapse 折叠面板的使用方法
2020/07/26 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
利用Python批量生成任意尺寸的图片
2016/08/29 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
计算机软件个人的自荐信范文
2013/12/01 职场文书
出国导师推荐信
2014/01/16 职场文书
机关财务管理制度
2014/01/17 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
晚会主持词开场白
2014/03/17 职场文书
药店促销活动策划方案
2014/08/24 职场文书
收款授权委托书
2014/10/02 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
公历12个月名称的由来
2022/04/12 杂记
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers