vue使用localStorage保存登录信息 适用于移动端、PC端

众所周知，vue可以用来开发移动端app，可以使用hbuilder将build好的vue打包成一个移动端app，但是用过之后就会发现，使用cookies或者session保存登录的token，在手机端无法保存，每次打开app依然提示登录。那么我们可以使用localStorage来保存登录信息就可以了，具体代码如下

1、vuex stroe代码

index.js

import Vue from 'vue'
import vuex from 'vuex'
import { login, logout, getInfo } from '@/api/login'
import { getToken, setToken, removeToken, setlocalStorage, getlocalStorage, removelocalStorage } from '@/utils/user'

Vue.use(vuex);

//state为访问状态对象 数字常量等
const state = {
 x:5,
 token: getlocalStorage(),
 nickname: '',
 course_id: 0,
 user_id: 0,
 group_id: 0,
 begin_group_num: 0,
 student_group: 0
};
//访问触发状态mutation是同步的
//actions是异步的
const mutations = {
 SET_TOKEN: (state, token) => {
  state.token = token
 },
 SET_NAME: (state, nickname) => {
  state.nickname = nickname
 },
};
const actions = {
 Login({ commit }, userInfo) {
  const username = userInfo.username.trim()
  return new Promise((resolve, reject) => {
   login(username, userInfo.password).then(response => {
    const data = response.data
    setlocalStorage(data.token)
    commit('SET_TOKEN', data.token)
    resolve()
   }).catch(error => {
    console.log()
    reject(error)
   })
  })
 },
 GetInfo({ commit }) {
  return new Promise((resolve, reject) => {
   getInfo().then(response => {
    const data = response.data
    console.log(data)
    commit('SET_NAME', data.nickname)
    resolve()
   }).catch(error => {
    console.log()
   })
  })
 },
 // 前端 登出
 FedLogOut({ commit }) {
  return new Promise(resolve => {
   commit('SET_TOKEN', '')
   removelocalStorage()
   resolve()
  })
 }
};

//getters 类似于生命周期里面的钩子，getters是在页面刚刚加载完毕之后马上加载，类似于生命周期里面的created
const getters = {
 // 测试getters
 x: state => state.x + 200,
};
export default new vuex.Store({
 state,
 mutations,
 getters,
 actions
})

2、localStorage 代码

user.js

import Cookies from 'js-cookie'

const TokenKey = 'MuseUi-Token'

export function getToken() {
 return Cookies.get(TokenKey)
}

export function setToken(token) {
 return Cookies.set(TokenKey, token)
}

export function removeToken() {
 return Cookies.remove(TokenKey)
}

const SessionKey = 'usertoken'
export function setlocalStorage(token) {
 return localStorage.setItem(SessionKey,token)
}

export function getlocalStorage() {
 return localStorage.getItem(SessionKey)
}

export function removelocalStorage() {
 return localStorage.setItem(SessionKey,null)
}

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

赞 (0)

相关推荐

  • vue中使用localstorage来存储页面信息

    vue中使用localstorage来存储页面信息

    今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻. 环境搭建: 参考:vue API 超简单的Vue.js环境搭建教程 详情: npm install --global vue-cli  vue init webpack vue-project 然后: cd vue-project npm install    如果你配置了淘宝镜像,也可以用cnpm install

  • Vue使用localStorage存储数据的方法

    本文实例为大家分享了Vue使用localStorage存储数据的具体代码,供大家参考,具体内容如下 通过下面这个案例来了解localStorage的基本使用方法. 输入评论人.评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表. 1.先组织出一个最新评论数据对象  var comment = {id:Date.now(), user:this.user, content:this.content} 2. 把得到的评论对象,保存到localStorage中  1.l

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

  • vue生成token保存在客户端localStorage中的方法

    vue生成token保存在客户端localStorage中的方法

    前面我们已经了解了可以通过localStorage在客户端(浏览器)保存数据. 我们后端有这样一个接口: http://localhost/yiiserver/web/index.php/token?client_appid=aaa&client_appkey=bbb 其实就向clients(理解为用户表即可)里面去生成一个token 这里的client_appid 就相当于用户名,client_appkey 就相当于密码. 这样后端认证之后会生成一个access-token,我们需要把这个ac

  • vue使用localStorage保存登录信息 适用于移动端、PC端

    众所周知,vue可以用来开发移动端app,可以使用hbuilder将build好的vue打包成一个移动端app,但是用过之后就会发现,使用cookies或者session保存登录的token,在手机端无法保存,每次打开app依然提示登录.那么我们可以使用localStorage来保存登录信息就可以了,具体代码如下 1.vuex stroe代码 index.js import Vue from 'vue' import vuex from 'vuex' import { login, logout

  • Python 自动登录淘宝并保存登录信息的方法

    前段时间时间为大家讲解了如何使用requests库模拟登录淘宝,而今天我们将对该功能进行丰富.所以我们把之前的那个版本定为1.0,而今天修改的版本定为2.0.版本的迭代意味着功能的升级,那今天的2.0版本较之前的1.0版本有哪些改进呢?我们一起来看看! 1.0版本实现步骤 我们先来回顾一下模拟登录淘宝的步骤吧,我们还是先看看淘宝登录的详细时序图: 这是淘宝网登录的一个请求流程,而我们模拟登录也是根据这样的一个流程.但是在代码模拟登录的时候就不会分的这么细,我们根据封装的思想将整个登录流程封装在四

  • 海王小姐姐悄悄问我怎么在PC端登录多个微信

    海王小姐姐悄悄问我怎么在PC端登录多个微信

    目录 事情是这样的 PC端微信能登录一个微信? 付费软件 一.分析研究微信进程 二.启动多个微信的命令行脚本 运行效果 小总结 事情是这样的 五一假期第一天值班 隔壁有点喜欢的小姐姐突然跑过来跟我聊天 "微信账号切换来切换去 特别麻烦" "怎么能同时打开多个呢?" 我心想,你有多少账号呀 本着助人为乐的态度,还是帮她写了个bat脚本 当然 她开心就好 PC端微信能登录一个微信? 在PC端启动微信,默认情况下,只能启动登录一个微信. 有时候,为了方便工作或其他的原因,

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

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

  • VUE使用localstorage和sessionstorage实现登录示例详解

    目录 正文 localstroage就是一个加强版的COOKIE. 三者的异同 localStorage和sessionStorage操作 登录实例: Router.js 正文 今天这篇日志记录下做VUE登录的血泪史(VUE2). 当时也不知道是咋想的,就认为php给VUE提供接口,可能session就不起作用了(现在的登录是用SESSION做的). 可是登录需要做呀,用什么存储登录的用户信息呢.最开始我还真想过用COOKIE,但是安全性得不到保证,因为在每次HTTP请求的时候,都会把cooki

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

  • 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实现保存用户登录信息

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

随机推荐