vuex项目中登录状态管理的实践过程
工具:
chorme浏览器安装Vue.js devtools方便调试
登录场景:
页面的导航处或其他地方有时会显示用户现在的登录状态,状态可分为:未登录,正在登录(loading),登录成功并显示用户名。
有些页面是不需要登录就可以让用户浏览的,但是有些页面必须登录才可以进入浏览。
实践:
场景1思考与实践
用vuex创建一个数据仓库
//src目录下新建一个store目录,创建index.js如下 //创建数据仓库 import Vuex from 'vuex'; import vue from 'vue'; import loginUser from 'loginUser.js' Vue.use(Vuex) const store = new Vuex.Store({ modules: { //modules 可以把不同的状态单独的放在一个对象里面 loginUser //是否正在登录中 }, strict: true, //只允许通过mutations改变状态 });
设置登录状态loading和当前登录用户user
//创建一个loginUser.js,创建他的state/mutations/actions //需要维护的状态 state: { loading: false, //登录状态 user: null, //当前登录的用户 }, //计算属性 getters: { status(state) { if (state.loading) { return 'loading' } else if (state.user) { return 'login' } else { return 'unLogin' } } }, //改变loading和user状态 mutations: { //设置loading setLoading(state, msg) { state.loading = msg }, //设置用户 setUser(state, msg) { state.user = msg } }, //actions中提交改变的状态 actions: { //登陆方法ctx相当于store async login(ctx, msg) { //登陆状态设置为true ctx.commit("setLoading", true) const result = await xxxapi.login(msg.loginId, msg.loginPassword) if (result) { //登录成功 ctx.commit('setUser', result) //登陆成功后登陆状态设置为false ctx.commit('setLoading', false) } //返回登陆是否成功 return result }, //判断是否已登录 async isLogin(ctx) { //正在登录中 ctx.commit('setLoading', true) //调接口是否登陆 const result = await xxxapi.isLogin(); ctx.commit('setUser', result); ctx.commit('setLoading', false) }, //注销 async logout(ctx) { ctx.commit('setLoading', false) await xxxapi.logout(); ctx.commit('setUser', null); ctx.commit('setLoading', false) } },
页面使用:
在登录时,有一个登录按钮,按钮的状态我们就可以在Vuex的仓库中获取
<button :disabled="loading">{{ loading ? 'loading...' : '登录' }} </button> computed: { //在computed中封装一下loading,不用每次调用都写this.$store.state.loginUser这一堆 // loading() { // return this.$store.state.loginUser.loading; // } // 优化 //辅助函数 //import {mapState} from "vuex" ...mapState({ loading: (state) => state.loginUser.loading }) }
点击按钮的时候提交的时候分发action
async handleSubmit() { const result = await this.$store.dispatch("loginUser/login", { loginId: this.loginId, loginPassword: this.loginPassword }); if (result) { // 登录成功 路由跳转 const path = this.$route.query.url || '/' this.$router.push(path) } },
页面的导航中切换显示此时的登录状态[loading/login/unlogin]
<!-- 显示页面登录状态--> <span v-if="status === 'loading'">正在登录请稍等...</span> <template v-else-if="status === 'login'"> <span>当前登录用户{{user.name}}</span> <span @click="handleLogout">退出</span> </template> <router-link to="/login" v-else> 登录 </router-link> computed: { ...mapGetters("loginUser", ["status"]), ...mapState("loginUser", ["user"]), }
登出时 更改状态
async handleLogout(){ await this.$store.dispatch("loginUser/logout") //跳转到登陆页面 this.$route.push(/xxx) }, 每次页面刷新需要检测登录状态,在main.js中,也就是vue创建的时候就要判断。 store.dispatch('loginUser/isLogin')
场景2思考与实践
参考了后台项目中的权限设置
总体设计:
刷新页面后,在Vuex仓库中先检测此时登录状态–> 导航守卫(router.beforeEach)通过判断meta中设置的参数检测此页面是否
需要登录后才能查看 -->页面渲染。
整体逻辑:
1.进入页面时判断此页面是否需要登录才能查看
2.判断登录状态。有三种状态如下:
- 如果已经登录了就直接进入想去的页面。
- 如果没登录,就进入登录页面让用户登录。
- 如果状态是加载中(loading),要传入想去的页面的路径,并在加载中页面监控Vuex仓库中用户登录状态的变化,监听状态变化完了之后,此时要不就是已经登录了,要不就是没有登录的状态,然后再走第1步判断是否要登录权限。
实践:
在router中设置meta,如果auth为true就是需要登录才能访问
//routes.js中 import Home from "./xx/xx.vue" export default[ { path:"/home", component:Home, meta: { auth: true, //需要权限才可以访问的页面 } } ] 在index.js中设置路由守卫 router.beforeEach((to, from, next) => { if (to.meta.auth) { // 需要登录权限才可以访问 const result = store.getters["loginUser/status"] if (result === 'loading') { // 加载状态,不知道有没有登录 // 跳转一个正在登录中页面,并且要在页面中监控是否已经登录成功了,要不然会永远停留在这里 // 并且路由跳转的时候得记录你之前是从哪里过来的,要不然不知道要跳转到哪一个页面 next({ path: '/loading', //去【正在登录中】的页面 query: { url: to.fullpath } }) } else if (result === 'login') { // 登录成功了 next(); } else { // 没有登录 this.$message.info('你需要登录'); next({ path: '/login', //去【正在登录中】的页面 query: { url: to.fullpath } }) } } else { //不需要登录权限就可以访问的页面 next() } })
在logining【正在登录中】页面中监控此时的状态
created() { this.unWatch = this.$watch(() => this.$store.getters["loginUser/status"], (status) => { console.log('此时的状态', status); if (status !== 'loading'){ this.$router.push(this.$route.query.url || '/home').catch(() => {} } }, { immediate: true }) }, destroyed() { //取消监控 this.unWatch() }
总结
到此这篇关于vuex项目中登录状态管理的文章就介绍到这了,更多相关vuex登录状态管理内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 在很多网站用户先访问一个要登录的页面,但当时没有登录后来登录了,等待用户登录成功之后肯定希望返回到上次访问的页面,下面我就来给大家介绍登录后跳转回原来要访问的页...2016-11-25
- 本文章完美的利用了php的curl功能实现模拟登录discuz以及模拟发帖,本教程供参考学习哦。 代码如下 复制代码 <?php $discuz_url = ‘ht...2016-11-25
- 简单的php获取linux服务器状态的代码,不多说-直接上函数:复制代码 代码如下:function get_used_status(){ $fp = popen('top -b -n 2 | grep -E "^(Cpu|Mem|Tasks)"',"r");//获取某一时刻系统cpu和内存使用情况 $rs =...2014-05-31
Ruby on Rails实现最基本的用户注册和登录功能的教程
这里我们主要以has_secure_password的用户密码验证功能为中心,来讲解Ruby on Rails实现最基本的用户注册和登录功能的教程,需要的朋友可以参考下...2020-06-30- 什么是SSO?单点登录SSO(Single Sign-On)是身份管理中的一部分。SSO的一种较为通俗的定义是:SSO是指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其他应用中的受保护...2015-11-08
- 什么是SSO?单点登录SSO(Single Sign-On)是身份管理中的一部分。SSO的一种较为通俗的定义是:SSO是指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其他应用中的受保护...2015-11-08
- 【问题描述】:同一用户在同一时间多次登录如果不能检测出来,是危险的。因为,你无法知道是否有其他用户在登录你的账户。如何禁止同一用户多次登录呢? 【解决方案】 (1) 每次登录,身份认证成功后,重新产生一个session_id。 s...2015-11-24
- 这篇文章主要为大家详细介绍了vue实现用户登录切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-22
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 出现phpmyadmin不能登录是我在修改我mysql服务器密码之后导致的,后来百度了相关的原因,原来是修改了mysql密码之后我们还需要在phpmyadmin目录中去修改config.inc.php中...2016-11-25
Vue-Element-Admin集成自己的接口实现登录跳转
关于这个Vue-element-admin中的流程可能对于新的同学不是很友好,所以本文将结合实例代码,介绍Vue-Element-Admin集成自己的接口实现登录跳转,感兴趣的小伙伴们可以参考一下...2021-06-23- 这篇文章主要介绍了教你如何监控 Java 线程池运行状态的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-27
- 这篇文章主要介绍了浅谈js二维码扫码登录是什么原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 昨天有一朋友说自己的phpmyadmin不能登录并且无任何提示了,问我怎么解决,下面我来分享一下关于phpmyadmin不能登录问题总结. phpmyadmin不能登录没有提示 解决方法:...2016-11-25
- session在php中是一个非常重要的东西,像我们用户登录一般都使用到session这个东西,相对于cookie来说session 要安全很多,同时我们购物车经常使用session来做临时的记录保存哦。使用session保存页面登录信息1、数据库连接...2015-10-21
- 这篇文章主要介绍了详解bash中的退出状态机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-11
- cookie 的用途之一是存储用户在特定网站上的密码和 id。另外,也用于存储起始页的首选项。在提供个人化查看的网站上,将要求阁下的网络浏览器利用阁下计算机硬驱上的少量...2016-11-25
- 这篇文章主要介绍了SpringBoot登录拦截配置详解(实测可用),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-22
- 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29
- 这篇文章主要介绍了C#判断本地文件是否处于打开状态的方法,涉及C#操作文件的技巧,非常具有实用价值,需要的朋友可以参考下...2020-06-25