Vue不同用户权限显示不同内容

一、登录页

<template>
    <div>
      <div class="username">
        <span>姓名</span>
        <input type="text" v-model="form.username">
      </div>
      <div class="password">
        <input type="text" v-model="form.password">
      </div>
      <div class="login">
        <span>登录</span>
      </div>
      <div>
        <span>{{getDetail}}</span>
        <b>{{getDetail=='管'?'':'训'}}</b>
      </div>
    </div>
</template>

二、内部函数

export default {
  name: 'App',
  data() {
    return {
      form:{
        username:'',
        password:''
      }
    }
  },
  computed:{
    getDetail(){
      let isTeacher=this.$store.state.roles.indexOf('teacher')>=0
      let isStudent=this.$store.state.roles.indexOf('student')>=0&&(!isTeacher)
      let isAdmin=(this.$store.state.roles.indexOf('admin')>0&&!isTeacher&&!isStudent)||(this.$store.state.roles.indexOf('root')&&!isTeacher&&!isStudent)
      return isTeacher?'师':isStudent?'学':isAdmin?'管':''
    }
  },
  methods: {
    axios.get({
      url:'请求地址',
      params:this.form
    }).then(res=>{
      localStorage.setItem('username',this.form.name)
      localStorage.setItem('organize',res.data.organize)
      this.$store.state.roles=res.data.roles
      this.$store.state.userId=res.data.userId
      this.jump('navPage')
    })
  },
}