前端实现不同角色登入展示不同页面效果实例

<!--          <el-submenu>二级菜单-->
<el-submenu index="info" v-if="user.role==='管理员'">
  <template slot="title">
    <i class="el-icon-house"></i>
    <span> 信息管理</span>
  </template>
  <el-menu-item index="/user">用户信息</el-menu-item>
</el-submenu>

router.beforeEach((to, from, next) => {
  // to 是到达的路由信息
  // from 是开源的路由信息
  // next 是帮助我们跳转路由的函数
  let adminPaths = ['/user']
  let user = JSON.parse(localStorage.getItem('honey-user') || '{}')

  if (user.role !== '管理员' && adminPaths.includes(to.path)) {
    // 如果当前登录的用户不是管理员，然后当前的到达的路径是管理员才有权限访问的路径，那这个时候我就让用户去到一个没有权限的页面，不让他访问实际的页面
    next('/403')
  } else {
    next()
  }
})

<el-form-item prop="role">
  <el-radio-group v-model="user.role">
    <el-radio label="管理员"></el-radio>
      <el-radio label="用户"></el-radio>
  </el-radio-group>
</el-form-item>

role: [
  { required: true, message: '请选择角色', trigger: 'blur' },
],

if(StrUtil.isBlank(user.getUsername())||StrUtil.isBlank(user.getPassword())||StrUtil.isBlank(user.getRole())){
    return Result.error("数据输入不合法");

}

<router-link to ="/">返回首页</router-link>