vue 登录状态,vuex状态管理几种状态
因为状态分散在许多组件和它们之间的交互中，大规模应用程序的复杂性通常会逐渐增加。为了解决这个问题，Vue提供了vuex。本文主要介绍vuex项目中关于登录状态管理的相关信息，有需要的可以参考一下。
目录
工具：
登录场景：
练习：
1情景思维与实践
2情景思维与实践
摘要
工具：
Chorme浏览器安装Vue.js devtools方便调试。
登录场景：
有时候用户当前的登录状态会显示在页面的导航或者其他地方。状态可以分为：未登录、正在登录(正在加载)、登录成功、显示用户名。
有些页面用户不需要登录就可以浏览，但有些页面需要登录才能浏览。
实践：
场景1思考与实践
用vuex创建数据仓库
//在//src目录下新建一个store目录，创建index.js如下
//创建数据仓库
从“Vuex”导入Vuex；
从“vue”导入vue；
从“loginUser.js”导入loginUser
Vue.use(Vuex)
const store=new Vuex。商店({
模块：{//模块可以在一个对象中放置不同的状态。
logiser//你登录了吗？
},
Strict: true，//通过突变只允许状态的改变。
});
设置登录状态加载用户和当前登录用户。
//创建一个loginUser.js并创建他的状态/突变/动作
//需要维护的状态
状态：{
Loading: false，//登录状态
User: null，//当前登录的用户
},
//计算属性
getters: {
状态{
if (state.loading) {
返回“装载”
} else if (state.user) {
返回“登录”
}否则{
返回“解锁”
}
}
},
//更改加载和用户状态
突变：{
//设置加载
setLoading(状态，消息){
state.loading=消息
},
//设置用户
setUser(state，msg) {
state.user=msg
}
},
//动作中提交更改的状态
动作：{
//登录方法ctx相当于store
异步登录(ctx，msg) {
//登录状态设置为真
ctx.commit(setLoading ，true)
const result=await xxxapi . log in(msg . log inid，msg.loginPassword)
如果(结果){
//登录成功
ctx.commit(setUser ，result)
//成功登录后，登录状态设置为false。
ctx.commit(setLoading ，false)
}
//返回登录是否成功
回送结果
},
//确定您是否登录。
异步isLogin(ctx) {
//登录
ctx.commit(setLoading ，true)
//调整接口是否登录。
const result=await xxxapi . is login()；
ctx.commit(setUser ，result)；
ctx.commit(setLoading ，false)
},
//注销
异步注销(ctx) {
ctx.commit(setLoading ，false)
await xxxapi . logout()；
ctx.commit(setUser ，null)；
ctx.commit(setLoading ，false)
}
},
页面使用：
登录时有一个登录按钮，按钮的状态可以在Vuex的仓库中获取。
button:disabled= loading“{ loading？装货.登录 }}
/按钮
计算值：{
//在computed中封装加载，而不是写这个。每次调用$store.state.loginUser。
//loading() {
//返回这个。$ store . state . log in user . loading；
//}
//优化
//辅助功能
//从“vuex”导入{mapState}
.mapState({
loading:(state)=state . log in user . loading
})
}
当按钮被点击并提交时，动作被分发。
异步handleSubmit() {
const result=等待此消息。$ store . dispatch( log in user/log in ，{
loginId: this.loginId，
log in password:this . log in password
});
如果(结果){
//路由跳转登录成功
const path=this。$route.query.url /
这个。$router.push(路径)
}
},
在页面导航中，切换显示此时的登录状态【加载/登录/解锁】。
！-显示页面登录状态-
Span-if= status== loading 正在登录。请稍候./span
模板v-else-if=status===login
Span当前登录的用户{{user.name}}/span
Span @click=handleLogout 退出/span
/模板
router-link to=/login v-else
登录
/路由器链接
计算值：{
.mapGetters(loginUser ，[status])，
.mapState(loginUser ，[user])，
}
注销时更改状态。
异步handleLogout(){
等待这个。$store.dispatch(登录用户/注销)
//跳转到登录页面
这个。$route.push(/xxx)
},
每次页面刷新时，都需要检查登录状态。在main.js中，也就是创建vue的时候，你要判断。
store . dispatch( log in user/is log in )
场景2思考与实践
引用后台项目中的权限设置。
总体设计：
页面刷新后，首先检查Vuex warehouse中的登录状态——导航卫士(router.beforeEach)通过判断meta中设置的参数来检查这个页面是否。
您需要登录查看页面渲染。
整体逻辑：
1.进入页面时，判断该页面是否需要登录才能查看。
2.判断登录状态。有以下三种状态：
如果您已经登录，请直接进入您想要进入的页面。
如果没有，请转到登录页面，让用户登录。
如果状态是正在加载，要传入你要去的页面的路径，正在加载的页面要监控Vuex仓库中用户登录状态的变化。监听状态改变后，要么登录，要么不登录，然后转到步骤1确定是否要登录。
实践：
在路由器中设置meta，如果auth为真，需要登录才能访问。
//routes.js
从导入主页。/xx/xx.vue
导出默认值[
{
路径：“/home”，
成分：家，
元：{
Auth: true，//需要访问权限的页面
}
}
]
在index.js中设置路由保护
router.beforeEach((收件人，发件人，下一个)={
if (to.meta.auth) {
//需要登录权限才能访问。
const result=store . getters[ log in user/status ]
if (result===loading) {
//加载状态，不知道有没有登录。
//跳转到一个登录页面，在页面中监控登录是否已经成功，否则将永远停留在这里。
//而且你在路由跳转的时候，要记录你之前是从哪里来的，不然你不知道跳转到哪个页面。
下一个({
path:“/loading”，//转到[登录]页面。
查询：{
url: to.fullpath
}
})
} else if (result===login) {
//登录成功
next()；
}否则{
//没有登录
这个。$message.info(您需要登录)；
下一个({
路径：/login ，//转到[登录]页面
查询：{
url: to.fullpath
}
})
}
}否则{
//无需登录权限即可访问的页面
下一个()
}
})
在“登录”页面中监控此时的状态。
已创建(){
this.unWatch=this。$手表(()=这个。$ store . getters[ log in user/status ]，(status)={
Console.log(此时状态，status)；
如果(状态！==正在加载){
这个。$router.push(这个。$route.query.url /home )。catch(()={}
}
}, {
即时：正确
})
},
销毁(){
//取消监控
this.unWatch()
}
总结
这就是这篇关于vuex项目中登录状态管理的文章。有关vuex登录状态管理的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。