众所周知,vue可以用来开发移动端应用,可以使用hbuilder将构建好的vue打包成一个移动端应用,但是用过之后就会发现,使用饼干或会话者保存登录的令牌,在手机端无法保存,每次打开应用依然提示登录。那么我们可以使用localStorage来保存登录信息就可以了,具体代码如下
<强> 1,vuex也是代码
index.js
从“Vue”进口Vue
从“vuex”进口vuex
从“进口{登录、注销、getInfo} @/api/登录的
进口{getToken、setToken removeToken、setlocalStorage getlocalStorage, removelocalStorage}从“@/跑龙套/用户”
Vue.use (vuex);//状态为访问状态对象数字常量等
const状态={
x: 5,
令牌:getlocalStorage (),
昵称:”,
course_id: 0,
user_id: 0,
group_id: 0,
begin_group_num: 0,
student_group: 0
};//访问触发状态突变是同步的//操作是异步的
const突变={
SET_TOKEN:(状态,令牌)=比;{
状态。令牌=令牌
},
SET_NAME:(状态,昵称)=比;{
状态。昵称=昵称
},
};
const行动={
登录({提交}、用户信息){
const用户名=userInfo.username.trim ()
返回新的承诺((解决,拒绝)=比;{
登录(用户名、userInfo.password)。(反应=比;{
常量数据=https://www.yisu.com/zixun/response.data
setlocalStorage (data.token)
提交(SET_TOKEN, data.token)
解决()
})。抓住(错误=比;{
console.log ()
拒绝(错误)
})
})
},
GetInfo({提交}){
返回新的承诺((解决,拒绝)=比;{
getInfo ()。(反应=比;{
常量数据=https://www.yisu.com/zixun/response.data
console.log(数据)
提交(SET_NAME, data.nickname)
解决()
})。抓住(错误=比;{
console.log ()
})
})
},//前端登出
FedLogOut({提交}){
返回新的承诺(解决=比;{
提交(‘SET_TOKEN’,”)
removelocalStorage ()
解决()
})
}
};//getter类似于生命周期里面的钩子,getter是在页面刚刚加载完毕之后马上加载,类似于生命周期里面创建的
const getter={//测试getter
x:状态=比;状态。x + 200,
};
出口默认新vuex.Store ({
状态,
突变,
getter方法,
行动
})
<强> 2,localStorage代码
user.js
从“js-cookie”进口饼干
const TokenKey=' MuseUi-Token '
导出功能getToken () {
返回Cookies.get (TokenKey)
}
导出功能setToken(令牌){
返回饼干。集(TokenKey,令牌)
}
导出功能removeToken () {
返回Cookies.remove (TokenKey)
}
const SessionKey=' usertoken '
导出功能setlocalStorage(令牌){
返回localStorage.setItem (SessionKey,令牌)
}
导出功能getlocalStorage () {
返回localStorage.getItem (SessionKey)
}
导出功能removelocalStorage () {
返回localStorage.setItem (SessionKey零)
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
