vuex项目中登录状态管理的实践过程

目录
  • 工具:
  • 登录场景:
  • 实践:
    • 场景1思考与实践
    • 场景2思考与实践
  • 总结

工具:

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.判断登录状态。有三种状态如下:

  1. 如果已经登录了就直接进入想去的页面。
  2. 如果没登录,就进入登录页面让用户登录。
  3. 如果状态是加载中(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登录状态管理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-09-22

详解Vuex管理登录状态

又仔细看了一遍vuex的文档,还是云里雾里的,不过至少明白它是一个专门管理状态的,根据数据状态的改变可以驱动视图更新,既然是这样那至少登录注册是一种状态,就用登录来做测试,学习vuex,不过话说回来,既然专门管理状态,那我至少要仔细推敲一下这个learn的学习项目有那些状态逻辑. 1.据说储存的vuex store里面的状态是临时的,右键刷新一下页面这些状态就销毁了(这是据说,请大神解惑我也没办法证实),如果是这样的话,我的用户状态user还是应该要写入sessionStorage,不然登录了的

uni-app微信小程序登录并使用vuex存储登录状态的思路详解

微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

详解vuex的简单使用

1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

vuex实现登录状态的存储,未登录状态不允许浏览的方法

基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独享的守卫beforeEnter. 导航守卫 正如其名,vue-router``` 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对

详解SQL Server数据库状态和文件状态

数据库状态 (database states) 查询数据库的当前状态 : 1.查询所有数据库的状态 ,通过sys.databases目录视图的state_desc列 user master go select state_desc ,[name] from sys.databases go 2.查询指定数据库的状态,通过DATABASEPROPERTYEX函数的Status属性 select DATABASEPROPERTYEX('demoData','status') go 状态: ONLIN

详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

详解JAVA 设计模式之状态模式

在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式. 在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象. 介绍 意图: 允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类. 主要解决: 对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为. 何时使用: 代码中包含大量与对象状态有关的条件语句. 如何解决: 将各种具体的状态类抽象出来. 关键代码: 通常

详解vue父子组件状态同步的最佳方式

哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接

详解linux SSH登录流程

本文给大家详细介绍了ssh 密钥登录远程服务器流程和注意事项,以下是详细内容: 密钥登录比密码登录安全,主要是因为他使用了非对称加密,登录过程中需要用到密钥对.整个登录流程如下: 远程服务器持有公钥,当有用户进行登录,服务器就会随机生成一串字符串,然后发送给正在进行登录的用户. 用户收到远程服务器发来的字符串,使用与远程服务器公钥配对的私钥对字符串进行加密,再发送给远程服务器. 服务器使用公钥对用户发来的加密字符串进行解密,得到的解密字符串如果与第一步中发送给客户端的随机字符串一样,那么判断为登

详解Python用户登录接口的方法

Readme: blog address: 摘要:编写登录接口 输入用户名.密码 认证成功后显示欢迎信息 输错3次后锁定 关键词:循环:判断:外部数据读写:列表:字典: 展望:可以结合数据库读写. codes: # Author: Steven Zeng ''' 作业2:编写登录接口 输入用户名密码 认证成功后显示欢迎信息 输错3次后锁定 ''' print("welcome to here") f1=open('username.txt') f2=open('password.txt