位置: IT常识 - 正文

vue设置cookie和路由守卫(vue set-cookie)

编辑:rootadmin
vue设置cookie和路由守卫

推荐整理分享vue设置cookie和路由守卫(vue set-cookie),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue如何设置cookie,vue js-cookie,vue js-cookie,vue如何设置cookie,vue set-cookie,vue如何设置cookie,vue中cookie的用法,vue如何设置cookie,内容如对您有帮助,希望把文章链接给更多的朋友!

vue项目中登录页面用户登录成功后,会把用户信息存储到cookie中,然后跳转进入首页,当用户没有登录时,直接输入页面地址会经过路由守卫检测cookie中是否存在用户信息,如果不存在,重定向到登录页让用户进行登录。接下来从配置cookie方法开始。

首先在项目中新建util/cookie.js文件作为存放cookie方法的js

在cookie.js中写进如下代码,该代码封装的三个方法,setCookie:存储cookie; getCookie:读取cookie; clearCookie:删除指定cookie;最后把这三个方法导出,便于全局调用,每行代码具体什么意思可观看以下教程:cookie教程一,cookie教程二,讲解的非常详细。

[](javascript:void(0)😉

/** * @description 保存cookie * @param {Object} json 需要存储cookie的对象 * @param {Number} days 默认存储多少天 */function setCookie(json, days) { // 设置过期时间 let data = new Date( new Date().getTime() + days * 24 * 60 * 60 * 1000 ).toUTCString(); for (var key in json) { document.cookie = key + "=" + json[key] + "; expires=" + data; }}/** * @description 获取cookie * @param {String} name 需要获取cookie的key */function getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) { return unescape(arr[2]) } else { return null }}/** * @description 删除cookie * @param {String} name 需要删除cookie的key */function clearCookie(name) { let json = {}; json[name] = ''; setCookie(json, -1)}export default { setCookie, getCookie, clearCookie}

[](javascript:void(0)😉

然后在main.js中引入刚刚写好的cookie.js,并通过Vue.prototype设置cookie这个字段作为全局变量

引入完毕之后就可以在任意页面中通过 this.cookie.方法名(值)来增删查cookie。

this.cookie.setCookie() //存cookie

this.cookie.getCookie() //读cookie

this.cookie.clearCookie() //删cookie

首先在项目中创建登录页Login.vue编写登录页面,登陆成功之后通过this.cookie.setCookie往cookie中存入用户信息。

[](javascript:void(0)😉

<template> <div> <form action> <div> 账号: <input type="text" v-model="name" /> </div> <div> 密码: <input type="password" v-model="password" /> </div> <div> <button @click="login" type="submit">登录</button> </div> </form> </div></template><script>export default { data() { return { name: "", password: "" }; }, methods: { login() { if (!this.name) { alert("请填写账号"); return; } if (!this.password) { alert("请输入密码"); return; } if(this.password&&this.name){ // 以json格式传给setCookie方法存入信息,方法里面会循环遍历该json以单个数据存储的方式,多次存入cookie中      // 注:cookie不支持直接以json的方式存入 let loginInfo={ LoginName:this.name, openId:"asfafsfsfsdfsdfsdfdsf" } // 调用setCookie方法,同时传递需要存储的数据,保存天数 this.cookie.setCookie(loginInfo,7) alert("登录成功") // 跳转到首页 this.$router.replace('/') } } }};</script>

[](javascript:void(0)😉

登陆成功之后再浏览器的cookie中可以看到存进去的LoginName,openId,以及他们的过期时间。

vue设置cookie和路由守卫(vue set-cookie)

登录成功我们跳转到了home.vue页面,通过this.getCookie( “LoginName” )获取一下登录名。

然后点击退出的时候需要清除一下cookie,然后返回登录页。

点击退出之后清除cookie,并且跳转到了登录页面,现在去查看cookie

发现里面是空白的。

至此我们第一步基本完成了,接下在跳转时要验证cookie里面是否有登录信息,如果没有则不让跳转并且跳转到登录页。也就是要用到路由守卫。

上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件

然后继续添加以下代码

/*\* beforeEach:从一个页面跳转到另外一个页面时触发\* to:要跳转的页面\* from:从哪个页面出来\* next:决定是否通过*/router.beforeEach((to, from, next) => { // 如果跳转的页面不存在,跳转到404页面 if(to.matched.length===0){ next('/404') } if (cookie.getCookie("openId")) { next() } else { if (to.path === "/Login") { next() } else { next('/Login') } }})

[](javascript:void(0)😉

router.beforeEach意思是在router.index设置了一个全局守卫,只要发生页面跳转,会执行里面的代码,首先先去判断跳转的页面是否存在,如果不存在进到404页面,然后调用cookie.getCookie()方法读取用户信息,如果不存在代表没有登录,用next(‘/Login’)进入Login登录页面进行登录,如果读取到了用户信息,不做拦截直接放行。

扩展

全局后置钩子

router.afterEach((to,from)=>{}),表示从当前页面离开时进行判断,一般用来跳转页面时提示用户是否离开该页面。

路由独享的守卫beforeEnter:(to,from,next)=>{},用法与全局守卫一致。只是,将其写进其中一个路由对象中,只在这个路由下起作用。

本文链接地址:https://www.jiuchutong.com/zhishi/292364.html 转载请保留说明!

上一篇:Ngo Dong河两岸的稻田美景,越南宁平省 (© Jeremy Woodhouse/Getty Images)(如何知道是干皮还是油皮)

下一篇:vue导出word(vue导出word文档打开报错,内容有问题)

  • oppoa5充电多少w(oppoa5充电器是多少瓦的)

    oppoa5充电多少w(oppoa5充电器是多少瓦的)

  • 抖音如何授权通讯录权限(抖音怎样授权通讯授权)

    抖音如何授权通讯录权限(抖音怎样授权通讯授权)

  • analytics是啥

    analytics是啥

  • 腾讯课堂网页版有时间记录吗(腾讯课堂网页版登录入口)

    腾讯课堂网页版有时间记录吗(腾讯课堂网页版登录入口)

  • 移动花卡如何激活免流(移动花卡如何激活腾讯视频免流)

    移动花卡如何激活免流(移动花卡如何激活腾讯视频免流)

  • 华为平板和手机微信可以同步在线吗(华为平板和手机怎么同步)

    华为平板和手机微信可以同步在线吗(华为平板和手机怎么同步)

  • 华为手机微信密码锁怎么解除(华为手机微信密码锁怎么设置)

    华为手机微信密码锁怎么解除(华为手机微信密码锁怎么设置)

  • oppo手机智能侧边栏怎么不能使用了(oppo手机智能侧边栏打开了没图标)

    oppo手机智能侧边栏怎么不能使用了(oppo手机智能侧边栏打开了没图标)

  • 半导体降温原理(半导体降温帽图片)

    半导体降温原理(半导体降温帽图片)

  • oppo手机老是黑屏死机怎么办(oppo手机老是黑屏一闪一闪)

    oppo手机老是黑屏死机怎么办(oppo手机老是黑屏一闪一闪)

  • 华为mate30充满电自动断电吗(华为mate30充满电多久)

    华为mate30充满电自动断电吗(华为mate30充满电多久)

  • oppoa57手机怎么刷机(oppoa57手机怎么样)

    oppoa57手机怎么刷机(oppoa57手机怎么样)

  • iphone8长度是13.5cm吗(iphone8的长宽)

    iphone8长度是13.5cm吗(iphone8的长宽)

  • 华为手机允许安装未知软件的设置在哪(华为手机允许安装未知应用权限在哪里设置)

    华为手机允许安装未知软件的设置在哪(华为手机允许安装未知应用权限在哪里设置)

  • oppor17支持多少瓦快充(oppor17支持多少快充)

    oppor17支持多少瓦快充(oppor17支持多少快充)

  • 恋爱记怎么解除另一半(恋爱记怎么解除自动攒钱)

    恋爱记怎么解除另一半(恋爱记怎么解除自动攒钱)

  • 常见物联网产品有哪些(常见的物联网设备有哪些)

    常见物联网产品有哪些(常见的物联网设备有哪些)

  • 拼多多商品详情图尺寸(拼多多商品详情是真实的吗)

    拼多多商品详情图尺寸(拼多多商品详情是真实的吗)

  • 小米8支持北斗导航吗(小米8支持北斗系统吗)

    小米8支持北斗导航吗(小米8支持北斗系统吗)

  • 苹果手机wifi不能正常使用怎么办(苹果手机wifi不能用)

    苹果手机wifi不能正常使用怎么办(苹果手机wifi不能用)

  • 酷狗音乐如何取消自动续费(酷狗音乐如何取消续费功能)

    酷狗音乐如何取消自动续费(酷狗音乐如何取消续费功能)

  • 手机怎么打空格(手机怎么打空格线)

    手机怎么打空格(手机怎么打空格线)

  • 海草中的章鱼,法国利翁湾 (© BIOSPHOTO/Alamy)(在海里的章鱼)

    海草中的章鱼,法国利翁湾 (© BIOSPHOTO/Alamy)(在海里的章鱼)

  • 分公司撤销跨区域转固定资产到总公司
  • 发票开具就能做账了吗
  • 发票该如何打印
  • 售后维修的配件有哪些
  • 进口设备的重置成本包括( )
  • 营改增后建筑业
  • 客户为了凑整多打的款计入什么科目?
  • 由于疏忽装修费用之前没有摊销应如何处理
  • 政府奖励企业款银行未收到会计分录
  • 总资产现金回收率是什么与什么平均余额的比
  • 资本公积转实收资本会计科目
  • 员工年终福利发什么
  • 建筑工程的适用范围
  • 小规模时取得的专票在一般纳锐人之后可以抵扣吗
  • 企业买卖股票应注意事项
  • 以前年度企业所得税申报表怎么查
  • 财税2018年39号公告残保金
  • 自产产品用于集体福利按什么价格入账
  • 设定受益计划资产上限
  • 其他货币资金怎么做账
  • 工业投资额是指什么
  • 有进项没有销项会计处理
  • 委托贷款利息收入需要缴纳增值税么
  • win11系统的电脑中拷贝到U盘中的文件没有了怎么解决
  • win10右键没有打印
  • 转账如何退还一部分钱
  • 购买烟酒送人是否需要纳税
  • php干啥用
  • php数字转换大写
  • 电脑自动进入睡眠模式黑屏
  • latex双栏图片
  • phpunicode
  • 发票抵税是怎么申报的
  • 带壳的栗子 (© Kai Keisuke/Shutterstock)
  • 消费者取得哪种权利
  • chattr
  • 差旅费误餐补贴标准
  • thinkphp demo
  • anjedi编辑器
  • 中秋快乐的祝福语怎么说
  • 可以抵扣土地增值税的项目
  • three.js gui
  • 收到老板的钱怎么做分录
  • 差旅费可以抵扣嘛
  • 单位结余资金该如何处理
  • Sqlserver 2005使用XML一次更新多条记录的方法
  • mysql group by实现原理
  • 个人转让房产税率
  • 差旅费中火车票的进项税怎么计算
  • 折旧后的剩余价值叫什么
  • 小规模纳税人什么时候用3%什么时候用5%
  • 房地产行业扣税标准
  • 应收账款和预收账款都是企业的流动资产
  • 免费样品销售给客户怎么入账
  • 交增值税会计凭证怎么做
  • 增值税留抵怎么做凭证
  • 担保费能否抵扣增值税
  • 资产季末值
  • 收到技术服务费计入什么科目
  • 原始凭证按来源分为
  • mysql1194
  • sql server复制数据库的方法
  • windows中任务栏
  • 电脑怎么改xp系统
  • 怎样备份微信聊天记录到新手机
  • Windows Server 2008病毒偷改账号的安全隐患
  • windows 安装源
  • win7右键没有
  • win8.1卸载软件在哪里
  • windows 10预览版
  • nodejs的应用场景和优缺点
  • perl语言基本命令
  • Android开发中遇到的问题及解决方案
  • js设置密码长度
  • jquery中的eq是什么
  • JQuery解析XML的方法小结
  • 国家税务局服务宗旨是什么
  • 首问责任制的概念
  • 税务有哪些方面
  • 税务筹划前景
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设