位置: 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文档打开报错,内容有问题)

  • 解析直通车关键词推广(直通车的理解)

    解析直通车关键词推广(直通车的理解)

  • 小米飞行模式在哪关(小米飞行模式在哪里调节)

    小米飞行模式在哪关(小米飞行模式在哪里调节)

  • 苹果腾讯会议录屏为什么没有声音(苹果腾讯会议录音)

    苹果腾讯会议录屏为什么没有声音(苹果腾讯会议录音)

  • 蚂蚁森林21g能量是什么(蚂蚁森林21g能量是什么行为)

    蚂蚁森林21g能量是什么(蚂蚁森林21g能量是什么行为)

  • 红米耳机左耳连不上(红米耳机左右连接)

    红米耳机左耳连不上(红米耳机左右连接)

  • 华为nova7pro刷新率(华为nova7pro刷新率在哪里打开)

    华为nova7pro刷新率(华为nova7pro刷新率在哪里打开)

  • 主机进水了第一时间怎么处理(主机进水了第一天开不了)

    主机进水了第一时间怎么处理(主机进水了第一天开不了)

  • 常用的鼠标接口类型(鼠标接口主要有)

    常用的鼠标接口类型(鼠标接口主要有)

  • boss直聘被锁定怎么解(boss直聘被锁定了怎么解封)

    boss直聘被锁定怎么解(boss直聘被锁定了怎么解封)

  • 苹果手机屏幕暗调不亮(苹果手机屏幕暗调到最亮还是暗)

    苹果手机屏幕暗调不亮(苹果手机屏幕暗调到最亮还是暗)

  • iphone xs大陆上市时间(苹果xs上架)

    iphone xs大陆上市时间(苹果xs上架)

  • 抖音怎么关闭自动保存视频(抖音怎么关闭自动点亮灯牌)

    抖音怎么关闭自动保存视频(抖音怎么关闭自动点亮灯牌)

  • vivo手电筒在那里(vivo的手电筒在哪儿)

    vivo手电筒在那里(vivo的手电筒在哪儿)

  • 京东为什么没有收货延迟(京东为什么没有人工客服)

    京东为什么没有收货延迟(京东为什么没有人工客服)

  • 抖音忘记账号密码怎么办(抖音账号密码忘记,记得抖音号)

    抖音忘记账号密码怎么办(抖音账号密码忘记,记得抖音号)

  • 拼多多物流异常订单怎么消除(拼多多物流异常限制金额永远都限制吗)

    拼多多物流异常订单怎么消除(拼多多物流异常限制金额永远都限制吗)

  • a2100是什么版本(a2200是什么版本)

    a2100是什么版本(a2200是什么版本)

  • 苹果xsmax可以两个微信吗(苹果xSmax可以两个微信吗)

    苹果xsmax可以两个微信吗(苹果xSmax可以两个微信吗)

  • 8p和6p的钢化膜通用吗(6p跟8p钢化膜通用吗)

    8p和6p的钢化膜通用吗(6p跟8p钢化膜通用吗)

  • type c和安卓接口区别(type c和安卓接口通用吗)

    type c和安卓接口区别(type c和安卓接口通用吗)

  • 朋友圈怎么看全文(朋友圈怎么看全部评论)

    朋友圈怎么看全文(朋友圈怎么看全部评论)

  • 剑灵配置要求是什么呀?(剑灵配置要求2020官方)

    剑灵配置要求是什么呀?(剑灵配置要求2020官方)

  • 如何给电脑文件夹设置密码?(如何给电脑文件加密并设置密码)

    如何给电脑文件夹设置密码?(如何给电脑文件加密并设置密码)

  • ctfshow愚人杯-web-wp(愚人挑战)

    ctfshow愚人杯-web-wp(愚人挑战)

  • 补缴个税差额有时间规定吗
  • 自行研发的无形资产不确认递延所得税
  • 长期股权投资的入账价值怎么算
  • 税法的分类都有什么
  • 定额发票上可以盖章吗
  • 购买租赁财产是什么意思
  • 公司为其他企业提供担保,担保对象可以是公司股东吗
  • 个人借款利息是多少才合法
  • 长期股权投资权益法初始成本的确定
  • 销售边角料收入属于什么收入
  • 股东投入的资金要交税吗
  • 企业支付的工伤赔偿需要什么材料
  • 长期借款产生的利息计入哪个科目
  • 加工成本属于什么会计科目
  • 通过检查人力资源
  • 税控服务费抵扣增值税
  • 什么是劳动保护费支出
  • 作废已开具的普通发票
  • 贷款余额反映了什么
  • 小规模纳税人开专票和普票的区别
  • 免税的发票可以用来抵税吗
  • win11玩游戏怎样
  • 企业利润分配的原则
  • 以前年度多计提的税金怎么调整
  • 航空公司收取什么费
  • 事业单位接受捐赠固定资产入账
  • 递延所得税资产是什么意思
  • php提高性能
  • 内格罗斯岛
  • 计提坏账准备对所得税费用的影响
  • 防伪税控风险纳税人
  • maven视频教程
  • 格雷厄姆岛
  • 暂估增值税可以抵扣吗
  • 超限量发票申请下来后怎么操作
  • php查询语句怎么写
  • chrome浏览器快捷方式
  • 勘察测绘公司是做什么的
  • ijk解码是什么意思
  • hash操作
  • 再次回归的成语
  • python中的count函数
  • 月初领票是不是要等到报完税才可以领
  • mysql数据库的设计与实现
  • win2008r2服务器文件无法进入软件
  • mysql切片
  • 注销营业执照的app
  • 对公账户是怎样的
  • 公司把股权转让给个人员工该怎么办
  • 金银首饰以旧换新会计处理
  • 个人如何开增值税普通电子发票
  • 广告公司收到广告收入会计分录
  • 公司社保外包了,没给我社保卡怎么办?
  • 留抵会计分录
  • 企业劳务费用如何记账
  • 预收租金会计分录科目
  • 为什么要缴纳残保金
  • 税收滞纳金计入营业外收入的哪里
  • 无法启动diagnostic policy service服务
  • sql server 2008教程
  • 存储过程的输出参数有且只能有一个
  • macossierra安装发生错误
  • centos防火墙操作
  • macos创建文件夹
  • mac怎么管理字体大小
  • centos6.5怎么安装
  • Win10系统无法启动,如何修复
  • win10应用商店不好用
  • kb3150220安装失败
  • css 网页布局
  • linux保存
  • vue实现分页功能
  • socketdescriptor
  • 黑马程序员c++语言讲义
  • jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
  • 图片处理流程
  • javascript引用值
  • 安卓 自动化app
  • 没工作个人所得税还用下载吗
  • 增值税预缴税款退税申请怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设