Vue中保存用户登录状态实例代码

2024-09-28 09:29:17

首先我们假设，这里的登录组件（register.vue）是App.vue组件的子组件，是通过路由进入登录组件的。

登录组件中用户点击登录后，后台会传过来一个用户名，我的App.vue组件中需要拿到这个用户名，并将上面的“登录注册”字样变为“用户名”。

为了保证用户刷新后用户名不会消失，这里我用到了sessionStorage

代码如下:

   signIn(){
    this.formData = $(".form").serialize();
    var that = this;
    this.$http.get("/api/user", this.formData)
     .then(response => {
      that.userName = response.data.data.user.userName;
      that.userHead = response.data.data.userHead;
      that.$emit('userSignIn', that.userName);
     })
     .catch(error => {
      console.log(error);
     });
   }

这里为了测试我直接mock的数据，真实情况应该是this.$http.post

这里的重点是那句

 that.$emit('userSignIn', that.userName);

向父组件（App.vue）传值

App.vue代码HTML

<keep-alive>
   <router-view @userSignIn="userSignIn"></router-view>
</keep-alive>

App.vue代码JS

export default {

 data(){
  return{
   userName: sessionStorage.userName
  }
 },

 methods:{
  //子组件(register)将用户名传过来
  userSignIn(userName){
   sessionStorage.userName = userName;
   this.userName = sessionStorage.userName;
  }
 }
}

这样父组件就可以使用用户名，保持了登录状态，并且因为使用了sessionStorage，刷新页面也可以保持。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Vue.js实现一个SPA登录页面的过程【推荐】

技术栈 vue.js 主框架 vuex 状态管理 vue-router 路由管理一般过程在一般的登录过程中,一种前端方案是: 检查状态:进入页面时或者路由变化时检查是否有登录状态(保存在cookie或者本地存储的值): 如果有登录态则查询登录信息(uid,头像等...)并保存起来:如果没有则跳转到登录页: 在登录页面(或者登录框),校检用户输入信息是否合法: 校检通过后发送登录请求:校检不成功则反馈给用户: 登录成功则从后端数据中取出session信息保存登录状态(可能需要跳转);登录不成功
vue.js实现用户评论、登录、注册、及修改信息功能

vue.js实现用户评论.登录.注册.及修改用户部分信息功能代码.效果图如下: 登入后: 登入前: 登录框: 注册框: html代码部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>index</title> <link rel="stylesheet" href=&quo
Vue学习之路之登录注册实例代码

根据Vue.js + Element UI + MongoDB进行开发 P1 安装Vue-CLI Vue.js文档利用Vue.js提供的一个官方命令行工具 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖,走你 $ cd my-project $ npm install $ npm run dev Vue.js 主要目录结构 . ├
Vue-router路由判断页面未登录跳转到登录页面的实例

如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该
vue组件父与子通信详解（一）

本文实例为大家分享了vue组件父与子通信的具体代码,供大家参考,具体内容如下一.组件间通信(父组件 --> 子组件) 步骤: ①父组件在调用子组件传值 <child-component myValue="123"> </child-component> ②在子组件中获取父组件传来的值 Vue.component('child-component',{ props:['myValue'], template:'' }) 代码1: <!do
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用

概述上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用. 这个应用始终遗留了一个问题,Web App在访问REST API时,没有经过任何认证,这使得服务端的REST API是不安全的,只要有人知道api地址,就可以调用API对服务端的资源进行修改和删除. 今天我们就来探讨一下如何结合Web API来限制资源的访问. 本文的主要内容如下: 介绍传统的Web应用和基于REST服务的Web应用介绍OAuth认证流程和
关于在vue-cli中使用微信自动登录和分享的实例

(以下所有接口由后台提供) 一.微信自动登录 //定义事件 methods:{ //判断是否微信登陆是不是微信浏览器 isWeiXin() { let ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mo
vue+axios实现登录拦截的实例代码

一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言该项目是利用了Github 提供的personal token作为登录token,通过token访问你的Repository List.通过这个项目学习如何实现一个前端项目中所需要的登录及拦截.登出.token失效的拦截及对应 axios 拦截器的使用. 准备你需要先生成自己的 Github Personal Token( 生成Token). Token 生成后访问Demo
vue路由跳转时判断用户是否登录功能的实现

通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha
Vue利用路由钩子token过期后跳转到登录页的实例

在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径这里我使用了组件内钩子进行判断token过期后跳转到登录页,

Vue中保存用户登录状态实例代码

相关推荐

随机推荐