vue登录页面cookie的使用及页面跳转代码

2024-03-23 17:02:24

1、大概流程

a、登录：前端使用validate对输入信息进行验证验证成功则成功跳转到用户信息页并存储cookie值

b、首页跳转用户信息页：判断cookie值cookie存在并不为空则跳转用户信息页,若为空则跳转登录页

c、退出页：点击退出跳转首页并删除cookie值

2、目录介绍

cookie.js为公共方法，用于cookie的存储、获取及删除

index.vue:首页

user.vue:用户信息页

myinfo.vue:退出页

3、文件内容

a、cookie.js

/*用export把方法暴露出来*/
/*设置cookie*/
export function setCookie(c_name,value,expire) {
  var date=new Date()
  date.setSeconds(date.getSeconds()+expire)
  document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
  //console.log(document.cookie)
}
/*获取cookie*/
export function getCookie(c_name){
  if (document.cookie.length>0){
    let c_start=document.cookie.indexOf(c_name + "=")
    if (c_start!=-1){
      c_start=c_start + c_name.length+1
      let c_end=document.cookie.indexOf(";",c_start)
      if (c_end==-1) c_end=document.cookie.length
        return unescape(document.cookie.substring(c_start,c_end))
      }
    }
  return ""
}
/*删除cookie*/
export function delCookie(c_name){
  setCookie(c_name, "", -1)
}

b、login.vue

methods:{
 submit(){
       setCookie('username',username,1000*60)
    axios.get('http://172.16.2.43:8080/static/data/mt_index.json').then((res)=>{
   this.$router.push({
          path: '/user', query:{userid: $("input[name='username']").val()}
         });
         //this.setuserid($("input[name='username']").val());
  })
 }
}

c、index.vue

<div class="topheader">
  <span class="location fl">北京</span>
  <div class="search-box">
     <a href=""><input type="text"></a>
  </div>
  <span class="mine" @click="jampmin">我的</span>
</div>
jampmin(){
  //获取cookie值
  var username=getCookie('username');
  if(username==''||username=='undefind'){
   this.$router.push({
        path: '/login'
      });
  }else{
   this.$router.push({
        path: '/user'
      });
  }
}

d、myinfo.vue

 <p @click="signout()" class="signout">退出</p>
signout(){
  /*删除cookie*/
  delCookie('username');
  this.$router.push({
    path: '/index'
  });
}

总结

以上所述是小编给大家介绍的vue登录页面cookie的使用及页面跳转代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue页面跳转后返回原页面初始位置方法

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =
vue实现登录后页面跳转到之前页面

在开发中我们经常遇到这样的需求,需要用户直接点击一个链接进入到一个页面,用户点击后链接后会触发401拦截返回登录界面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 先说一下我们需要用到的几个API: 1.router.currentRoute:当前的路由信息对象,我们可以通过router.currentRoute.fullPath获得解析后的 URL,包含查询参数和 hash 的完整路径,如果要访问的页面的路由有命名(name)的话,可以通过router.currentRoute.
vue 实现axios拦截、页面跳转和token 验证

第一步: 路由多添加一个自定义字段 requireAuth path: '/repository', name: 'repository', meta: { requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 }, component: Repository 第二步: router.beforeEach((to, from, next) => { if (to.meta.requireAuth) { // 判断该路由是否需要登录权限 if (store.sta
vue项目实现表单登录页保存账号和密码到cookie功能

实现功能: 1.一周内自动登录勾选时,将账号和密码保存到cookie,下次登陆自动显示到表单内 2.点击忘记密码则清空之前保存到cookie的值,下次登陆需要手动输入次要的就不说了直接上主要的代码 html部分 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm loginFrom"> <h1 style
Vue 页面跳转不用router-link的实现代码

1.给父页面跳转的地方设置事件 //原来的页面上展示的信息 <div v-if="!addShow" class="function"> <el-row> <template slot-scope="scope"> <el-button type="success" size="mini" @click="handleEdit(scope.$index,
vue中页面跳转拦截器的实现方法

本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 登录拦截逻辑第一步:路由拦截首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管理页面添加meta字段 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const r
对vue2.0中.vue文件页面跳转之.$router.push的用法详解

vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .
vue通过cookie获取用户登录信息的思路详解

思路进入页面若未登录,跳转至登陆页面若已登录,从cookie中获取用户信息,并执行后续操作 2. 登录页面,存入cookie(setCookie) import {setCookie,getCookie}from 'src/js/cookieUtil' methods: { async cheack_n_p () { if( this.checkCode === this.pwd) { this.loginData = await getUserInfo(this.uname, this.
vue登录页面cookie的使用及页面跳转代码

1.大概流程 a.登录:前端使用validate对输入信息进行验证验证成功则成功跳转到用户信息页并存储cookie值 b.首页跳转用户信息页:判断cookie值cookie存在并不为空则跳转用户信息页,若为空则跳转登录页 c.退出页:点击退出跳转首页并删除cookie值 2.目录介绍 cookie.js为公共方法,用于cookie的存储.获取及删除 login.vue :登录页 index.vue:首页 user.vue:用户信息页 myinfo.vue:退出页 3.文件内容 a.cookie
vue登录页实现使用cookie记住7天密码功能的方法

问题描述项目的登录页中,会有要求记住7天密码的功能,本篇文章记录一下写法,主要是使用cookie,注释我写的很详细了,大家可以看一下我写的注释的步骤,还是比较详细的.亲测有效 html部分代码图示效果图示代码粘贴 <el-form ref="form" :model="form" label-width="80px" label-position="top" @submit.native.prevent >
Vue登录拦截登录后继续跳转指定页面的操作

在开发中我们经常遇到这样的需求,需要用户登录后才可以访问该页面,如果用户没有登录点击该页面时则自动跳转到登录页面,登录后又跳转到链接的页面而不是首页,这种问题该如何去做呢? 1.在路由器router下的 index.js 的配置中,给需要拦截登录的页面的路由上加一个meta: {loginRequest: true} ,其中loginRequest 变量自己可以随意定义 2.在main.js文件里面添加beforeEach钩子函数解释: router.beforeEach((to, from,
Vue登录页面的动态粒子背景插件实现

目录动态粒子效果如下: 安装插件动态粒子效果如下: 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-particles' Vue.use(VueParticles) 在vue文件中使用 <vue-particles color="#409EFF" :particleOpacity="0.7" :particlesNumber=&q
vue模仿网易云音乐的单页面应用

说明一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目. 直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi,才开始动手去做. 仅仅完成了首页,登入,歌单,歌曲列表页. 项目地址 https://github.com/qp97vi/music 项目成功运行还要把后端api在本地运行前端技术栈 vue2+vuex+vue-router+axios+mint-ui+webpack 遇到的问题
vue项目动态设置页面title及是否缓存页面的问题

跟传统的页面可以在每个页面分别设置填写对应的页面title,but,vue是单页面应用项目,想设置页面对应的title就不能跟传统方式一样了. 下载 npm install vue-wechat-title --save 在mian.js中引入 //设置title import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle) 在router的index.js的路由中加上参数 { path: '/login', comp
vue中使用router全局守卫实现页面拦截的示例

一.背景在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由.而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论) 二.使用场景静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的: 动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了.假如用户
js当前页面登录注册框,固定div,底层阴影的实例代码

这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&
js基于cookie方式记住返回页面用法示例

本文实例讲述了js基于cookie方式记住返回页面的用法.分享给大家供大家参考,具体如下: 首先明确以下概念 ①. 同名的 cookie,不同的 domain 或不同的 path,属不同的 cookie: 同名的 cookie,相同的 domain 且相同的 path,不同的 expires,属同一个 cookie. ②. 不加过期时间的cookie在浏览器关闭后失效 ③ 二级域名cookie可以生效,通过指定domain 于是在js端 document.cookie="back_url=&qu
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

html代码: <section class="container page-home"> <div id="main-content" class="wrap-container zerogrid"> <article id="news_content" v-for="item in items"> <div class="col-1-2 right&q

vue登录页面cookie的使用及页面跳转代码

相关推荐

随机推荐