vue使用localStorage保存登录信息 适用于移动端、PC端
众所周知，vue可以用来开发移动端app，可以使用hbuilder将build好的vue打包成一个移动端app，但是用过之后就会发现，使用cookies或者session保存登录的token，在手机端无法保存，每次打开app依然提示登录。那么我们可以使用localStorage来保存登录信息就可以了，具体代码如下
1、vuexstroe代码
index.js
importVuefrom'vue'
importvuexfrom'vuex'
import{login,logout,getInfo}from'@/api/login'
import{getToken,setToken,removeToken,setlocalStorage,getlocalStorage,removelocalStorage}from'@/utils/user'
Vue.use(vuex);
//state为访问状态对象数字常量等
conststate={
x:5,
token:getlocalStorage(),
nickname:'',
course_id:0,
user_id:0,
group_id:0,
begin_group_num:0,
student_group:0
};
//访问触发状态mutation是同步的
//actions是异步的
constmutations={
SET_TOKEN:(state,token)=>{
state.token=token
},
SET_NAME:(state,nickname)=>{
state.nickname=nickname
},
};
constactions={
Login({commit},userInfo){
constusername=userInfo.username.trim()
returnnewPromise((resolve,reject)=>{
login(username,userInfo.password).then(response=>{
constdata=response.data
setlocalStorage(data.token)
commit('SET_TOKEN',data.token)
resolve()
}).catch(error=>{
console.log()
reject(error)
})
})
},
GetInfo({commit}){
returnnewPromise((resolve,reject)=>{
getInfo().then(response=>{
constdata=response.data
console.log(data)
commit('SET_NAME',data.nickname)
resolve()
}).catch(error=>{
console.log()
})
})
},
//前端登出
FedLogOut({commit}){
returnnewPromise(resolve=>{
commit('SET_TOKEN','')
removelocalStorage()
resolve()
})
}
};
//getters类似于生命周期里面的钩子，getters是在页面刚刚加载完毕之后马上加载，类似于生命周期里面的created
constgetters={
//测试getters
x:state=>state.x+200,
};
exportdefaultnewvuex.Store({
state,
mutations,
getters,
actions
})
2、localStorage代码
user.js
importCookiesfrom'js-cookie'
constTokenKey='MuseUi-Token'
exportfunctiongetToken(){
returnCookies.get(TokenKey)
}
exportfunctionsetToken(token){
returnCookies.set(TokenKey,token)
}
exportfunctionremoveToken(){
returnCookies.remove(TokenKey)
}
constSessionKey='usertoken'
exportfunctionsetlocalStorage(token){
returnlocalStorage.setItem(SessionKey,token)
}
exportfunctiongetlocalStorage(){
returnlocalStorage.getItem(SessionKey)
}
exportfunctionremovelocalStorage(){
returnlocalStorage.setItem(SessionKey,null)
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。