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 相关文章推荐
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
javascript数组includes、reduce的基本使用
Jul 02 Javascript
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
PHP操作Memcache实例介绍
2013/06/14 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python/Django后端使用PIL Image生成头像缩略图
2019/04/30 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
pytorch:torch.mm()和torch.matmul()的使用
2019/12/27 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
若干个Java基础面试题
2015/05/19 面试题
社会实践评语
2014/04/28 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server