Vue项目使用localStorage+Vuex保存用户登录信息

本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码，供大家参考，具体内容如下

api.js

import axios from 'axios'
const baseURL = 'http://XXX

// 全局的 axios 默认值
axios.defaults.baseURL = baseURL

// 登录请求
const loginCheck = params => {
  return axios.post('/login', params).then(res => {
    return res.data
  })
}
export { loginCheck }

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {}
const mutations = {
  handleUserName: (state, user_name) => {
    state.user_name = user_name
      // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值（初始值为空）的情况
    localStorage.setItem('user_name', user_name)
  }
}
const state = {
  user_name: '' || localStorage.getItem('user_name')
}
// getters 只会依赖 state 中的成员去更新
const getters = {
  userName: (state) => state.user_name
}

const store = new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})
export { store }

login.vue

methods:{
  login(formName){
   this.$refs[formName].validate((valid) => {
     if (valid) {
      // 调用登录请求接口
      loginCheck(this.form).then(res=>{
      //  console.log(res);
       // 登录成功,提示成功信息，然后跳转到首页，同时将token保存到localstorage中, 将登录名使用vuex传递到Home页面
       if(res.meta.status === 200){
        // 提示成功信息
        this.$message({
          message: res.meta.msg,
          type: 'success'
        });
        var that = this;
        // 跳转到首页
        setTimeout(function(){
          that.$router.push({name:'Home'})
        },1000)
        localStorage.setItem('token',res.data.token)
        // 将登录名使用vuex传递到Home页面
        this.$store.commit('handleUserName',res.data.username);
       }else{
        // 登录失败，就提示错误信息
        this.$message({
          message: '登录失败,'+res.meta.msg,
          type: 'error'
        });
       }
      })
     } else {

      return false;
     }
    });
  }
 }

Home.vue

您好，{{$store.getters.username}}

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

赞 (0)

相关推荐

  • 详解vuex commit保存数据技巧

    vuex 单向数据流,推荐的commit 改变state数据,写起来非常繁琐,因为改数据可能要写很多commit函数. 依据我的理解,单向数据流主要是为了避免数据混乱,便于调试. 说白了,就是一个数据改变了,是什么促使他改变的. 数据流向永远都是一个方向,下游是没有权利改变数据的,所以需要数据发放中心同一级的方法来改变数据. 单项数据流,对于react来说,的确是必要的,但对于vue来说,是那么有必要吗? vue采用数据依赖更新,必要的数据都采用Object.defineProperty处理.给

  • vue生成token并保存到本地存储中

    vue生成token并保存到本地存储中

    首先回顾一下token: token认证是RESTFUL.api的一个很重要的部分,通过token认证和token设置,后端会有一个接口传给前台: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就是向用户表里去生成一个token 这里的client_id相当于用户名,client_key相当于密码,这样后台会生成一个client_token,我们需要把这个token保存到客户

  • Vue中保存数据到磁盘文件的方法

    网上有诸多例子,都不是在vue下,直接复制过来,可能会出现各类的错误,折腾了若干个小时,终于搞定. 以app.vue为例 <mt-button size="small" @click="ExportData()" type="primary" style="margin:0px 10px 0px 0px">导出</mt-button> 下面在方法中定义函数 <code class="la

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

    首先我们假设,这里的登录组件(register.vue)是App.vue组件的子组件,是通过路由进入登录组件的. 登录组件中用户点击登录后,后台会传过来一个用户名,我的App.vue组件中需要拿到这个用户名,并将上面的"登录注册"字样变为"用户名". 为了保证用户刷新后用户名不会消失,这里我用到了sessionStorage 代码如下: register.vue中用户点击登录触发signIn方法 signIn(){ this.formData = $(".

  • Vuex利用state保存新闻数据实例

    Vuex利用state保存新闻数据实例

    回顾 以前我们在做这个新闻列表的时候,是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"}, {newsid:"102",pubtime:"2016-10-28",title:"系统之战"

  • Vue项目使用localStorage+Vuex保存用户登录信息

    本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults.baseURL = baseURL // 登录请求 const loginCheck = params => { return axios.post('/login', params).then(

  • django使用JWT保存用户登录信息

    在使用前必须弄明白JWT的相关知识,可以看我的另一篇博文:https://www.jb51.net/article/166843.htm 什么是JWT? Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景.JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其它业务逻辑

  • php中如何同时使用session和cookie来保存用户登录信息

    php中如何同时使用session和cookie来保存用户登录信息

    同时使用session和cookie来保存用户登录信息1.数据库连接配置页面:connectvars.php 复制代码 代码如下: <?php//数据库的位置define('DB_HOST', '127.0.0.1');//用户名define('DB_USER', 'root');//口令define('DB_PASSWORD', '19900101');//数据库名define('DB_NAME','test') ;?> 2.登录页面:logIn.php 复制代码 代码如下: <?ph

  • php同时使用session和cookie来保存用户登录信息的实现代码

    1.用户登录状态操作类UserLogin <?php final class UserLogin { public function __construct() { } public static function getUserInfo() { if (isset($_COOKIE["user_id"])&&$_COOKIE["user_id"]&&(trim($_COOKIE["user_id"])!=&

  • Django利用cookie保存用户登录信息的简单实现方法

    本文实例讲述了Django利用cookie保存用户登录信息的方法.分享给大家供大家参考,具体如下: 设置cookie response对象.set_cookie('key','value',多少秒后过期) 获取cookie request对象.COOKIES.get('key') 我们继续前一篇的代码 def hi(request): msg = {'result':''} loginSuccess = False # 是否登录成功标识 if user.userLogin(request.POS

  • JS使用cookie保存用户登录信息操作示例

    本文实例讲述了JS使用cookie保存用户登录信息.分享给大家供大家参考,具体如下: 通常cookie和session,是web开发中用于存储信息的对象,session存在于服务器的内存中,而cookie则是存在客户端,所以js可以直接操作cookie进行信息的存储和读取. js存放cookie一般的写法,如:document.cookie="userName=admin";,如果是多个键值对:document.cookie="userName=admin; userPass

  • PHP中如何使用session实现保存用户登录信息

    session在php中是一个非常重要的东西,像我们用户登录一般都使用到session这个东西,相对于cookie来说session 要安全很多,同时我们购物车经常使用session来做临时的记录保存哦. 使用session保存页面登录信息 1.数据库连接配置页面:connectvars.php <?php //数据库的位置 define('DB_HOST', 'localhost'); //用户名 define('DB_USER', 'root'); //口令 define('DB_PASSW

  • php中使用cookie来保存用户登录信息的实现代码

    php中使用cookie来保存用户登录信息的实现代码

    使用cookie保存页面登录信息 1.数据库连接配置页面:connectvars.php 复制代码 代码如下: <?php //数据库的位置 define('DB_HOST', 'localhost'); //用户名 define('DB_USER', 'root'); //口令 define('DB_PASSWORD', '19900101'); //数据库名 define('DB_NAME','test') ; ?> 2.登录页面:logIn.php 复制代码 代码如下: <?php

  • VUE:vuex 用户登录信息的数据写入与获取方式

    整体思路: 前台获取用户数据,向后台发送post请求,验证成功后 前台接受数据,改变用户登录状态 将登录状态及用户数据写入到state中 这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息 1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch('setLogin', true);将数据写入到state中 页面:login.vue 代码: this.loginData = await getUserI

  • 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.

随机推荐