Question

我的用例是这样的。

当有人登录系统时，我会在登录操作中识别用户角色，并将该值存储为状态。
我有3个用户角色，即学生，管理员和 dataEntry
我也为这3个角色分别设置3条路线。（/ student，/ admin，/ dataEntry）
因此，我想将用户路由到系统，以便根据用户角色进行操作。逻辑上是这样的。

if(userType == 'student'){
	router.push('/student')
},
if(userType == 'admin'){
	router.push('/admin')
}

我如何实现这一目标？我是vueJS的新手，如果有条件，我不知道在哪里放这些。

这是我的代码 Store.js

import Vue from 'vue';
import Vuex from 'Vuex';
import axios from 'axios';
import router from './main.js';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state:{

    idToken:null,
    userId:null,
    userType:null,
    userName:null

  },

  mutations:{

    authUser(state,userData){

      state.idToken = userData.token,
      state.userId  = userData.id,
      state.userName = userData.userName,
      state.userType = userData.type

    },

    clearAuthData(state){

      state.idToken = null,
      state.userId = null,
      state.userName = null,
      state.userType = null

    }

},

  actions:{

    signup({commit},authData){
      axios.post('http://localhost/laravel_back/public/api/register', authData)
        .then(res => {
          commit('authUser',{
          token:res.data.idToken,
          userId:res.data.localId
          })
          //dispatch('storeUser',authData)
        })
        .catch(error => console.log("ERROR COMES FROM ACTION SIGN UP",error))
    },

    login({commit},authData){
      axios.post('http://localhost/laravel_back/public/api/login',authData

      )
        .then(res => {
          console.log("Back-end Response",res);

          commit('authUser',{
            token:res.data[0].token,
            userName:res.data[1][0].fname,
            id:res.data[2].id,
            type:res.data[3][0].role_id

        })})
        .catch(error => console.log(error))

        //router.push('/student')

      },
    


logout({commit}, {router}){
  commit('clearAuthData')
  router.replace('/')
},

  },
  getters:{
    userId(state){
      return state.userId

    },
    userType(state){
      return state.userType
    },
    userName(state){
      return state.userName
    },
    returnToken: state => {
      return state.idToken
    }

  }
});

header.vue

<template>
  <div class="fluid-container" id="headerr">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1>Exams-portal</h1>
        </div>

        <div class="col form-group" v-if="!auth">
          <div class="row">
            <div class="col">
              <input type="email" name="email" value="" v-model="email" class="form-control float-right">
            </div>

            <div class="col" >
              <input type="password" name="password" value="" v-model="password" class="form-control float-right">
            </div>

            <div class="col">
              <button type="button" class="btn btn-primary " name="button" @click="onLogin">Login</button>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <router-link :to="{ path:'findYourAccount' }">Forgot password?</router-link>
            </div>
          </div>
        </div>
        <div class="" v-if="auth" class="col-sm-6 form-group" >

          <div class="row">
            <div class="col">
              Logged as {{userName}}
              </div>

            <div class="col">
              <button type="button"  class="btn btn-primary float-right" name="button" @click="onLogout">Logout</button>
            </div>

          </div>


        </div>


      </div>
    </div>

  </div>
</template>
<script>
import { mapActions } from 'vuex';
  export default{
    data () {
      return {
        email: '',
        password: ''
      }
    },
    computed:{
      auth(){
        return this.$store.getters.isAuthenticated
      },
      userName(){
          return this.$store.getters.userName
        }

    },
    methods:{
      ...mapActions(["logout"]),
      onLogin () {

        const formData = {
          email: this.email,
          password: this.password,
          returnSecureToken:true
        }
        this.$store.dispatch('login',{
         email: this.email,
         password: this.password,
         //router: this.$router
       })

    },
    onLogout(){
      this.logout({ router: this.$router });
    }
    }
  }
</script>
<style scoped>
#headerr{
  color:white;
  background-color: #003459;
  padding: 10px;
}
</style>

Answer 1

我会说你应该在登录操作中处理这个问题。

您在登录操作中标识用户角色，然后将角色保存为状态并根据用户角色重定向到用户页面，在同一方法/回调中执行此操作。

其他方法可以是将用户角色作为登录Vue组件中的计算值并处理用户角色更改

computed: {
  userRole: function () {

    let role = this.$store.state.userRole
    if(role === 'student'){
      router.push('/student')
    } else if(role === 'admin'){
      router.push('/admin')
    }

    return role 
  }
}

但我认为第一种方法更好。

您不必将路由器（this.$router）传递给商店操作。您可以从登录存储操作返回Promise：

在Store.js中：

login({commit},authData){
  return new Promise(resolve => {
    axios.post('http://localhost/laravel_back/public/api/login',authData)
    .then(res => {
      console.log("Back-end Response",res);
      commit('authUser',{
        token:res.data[0].token,
        userName:res.data[1][0].fname,
        id:res.data[2].id,
        type:res.data[3][0].role_id
      })
      //get the role
      let role = res.data[3][0].role_id
      resolve(role);
    }).catch(error => console.log(error))
  })
}

在组件中：

onLogin () {
  this.$store.dispatch('login', {
    email: this.email,
    password: this.password
  }).then(role => {
    this.$router.push('/'+role)
  });
}

基于VueJS角色的路由器认证

1 个答案: