问：如何查看 Vuex 中的角色？

Posted 2023-02-23

【中文标题】问：如何查看 Vuex 中的角色？

【英文标题】：Q: How do I check role in Vuex?

【发布时间】：2021-08-02 00:45:47

【问题描述】：

我试图检查 vue js 中用户登录的角色，我正在使用 vuex 进行存储，我想检查用户或管理员的角色是否记录了角色 = 1 和角色 = 1 的推送给用户但对我来说 vuex 有问题。我的角色是角色 1 代表管理员，0 代表数据库中的用户登录，我正在使用 laravel 7 进行 API 和 Vue

谁能帮帮我？

store.js

state: 
        status: '',
        token: localStorage.getItem('token') || '',
        user: ,
        role: ''
    ,
    mutations: 
        auth_request(state)
            state.status = 'loading'
        ,
        auth_succes(state, token, user,role)
            state.status = 'success'
            state.token = token
            state.user = user
            state.role = role
        ,
        auth_error(state)
            state.status = 'error'
        ,
        logout(state)
            state.status = ''
            state.token = ''
        ,
    ,
    actions: 
        login(commit, user)
            return new Promise((resolve, reject) =>
                commit('auth_request')
                axios(url: 'http://127.0.0.1:8000/api/v1/login', data: user, method: 'POST')
                .then(res => 
                    const token = res.data.token
                    const user = res.data.user
                    const role = res.data.role
                    localStorage.setItem('token', token)
                    axios.defaults.headers.common['Authorization'] = token
                    commit('auth_succes', token, user,role)
                    resolve(res)

                )
                .catch(err =>
                    commit('auth_error')
                    localStorage.removeItem('token')
                    reject(err)
                )
            )
        ,
        register(commit, user)
            return new Promise((resolve, reject) =>
                commit('auth_request')
                axios(url: 'http://127.0.0.1:8000/api/m2/signIn', data: user, method: 'POST')
                .then(res => 
                    const token = res.data.token
                    const user = res.data.user
                    localStorage.setItem('token', token)
                    axios.defaults.headers.common['Authorization'] = token
                    commit('auth_succes', token, user)
                    resolve(res)

                )
                .catch(err =>
                    commit('auth_error')
                    localStorage.removeItem('token')
                    reject(err)
                )
            )
       

登录.vue

methods: 
       login: function()
           let email = this.email
           let password = this.password
           if(this.$store.state.role === 1 )
               this.$store.dispatch('login',email, password)

                   console.log('Admin logged');

           else
               console.log('User logged');
       

结果显示我是：用户登录

【参考方案1】：

vuex mutation 可以接受两个参数，“mutation name”和“payload”

你正在尝试传递 4 个参数 commit('auth_succes', token, user,role)

你应该使用对象将多个参数传递给 vuex 变异

commit('auth_succes', token, user, role )

【讨论】：

你是否更新了你的 auth_succes 突变，以便它可以处理对象负载？

是的，我已经更新了变异！但是如果尝试 this.$store.state.role == 1 || 'admin' 它返回管理员记录