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

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)
}

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