若依前端如何判断当前登录用户的角色

对于这个问题，我们可以通过前端从后端获取用户的角色信息，然后进行判断。通常情况下，后端会返回用户的角色信息，前端可以通过解析后端返回的 JSON 数据来获取当前用户的角色。如果用户的角色信息是通过 cookies 保存的，前端也可以获取 cookies 中保存的用户角色信息来实现判断。具体实现方式可以根据具体应用场景来选择。

相关问题

若依vue获取当前登录角色

如果你的前端应用使用的是 Vue.js，并且通过 API 与后端进行交互，那么获取当前登录角色的方式通常是从后端返回的认证信息中获取角色信息。

具体来说，你可以在后端接口中返回一个包含认证信息和用户信息的 JSON 对象，前端通过 API 获取该对象并从中提取角色信息。例如：

// 在 Vue.js 中通过 API 获取当前登录用户信息
axios.get('/api/user').then(response => {
    const user = response.data;
    const role = user.role;
    // 在这里处理角色信息
}).catch(error => {
    console.error(error);
});

以上代码使用 axios 库向后端发送 GET 请求获取当前登录用户信息。在成功获取到用户信息后，从中提取 role 属性作为当前登录角色并进行处理。

需要注意的是，这只是一个示例代码，具体实现方式可能因业务需求和框架而不同。如果你使用的是其他的前端框架或者身份认证方式，可能需要使用不同的方法获取当前登录角色。

vue项目中实现用户登录角色鉴权，不同的用户登录展示不同的菜单

实现用户登录角色鉴权可以分为以下几个步骤：

1. 创建路由配置文件
在路由配置文件中定义不同的路由，每个路由对应一种权限。例如，管理员可以访问所有的路由，而普通用户只能访问部分路由。

import Vue from 'vue'
import Router from 'vue-router'
import Admin from '@/views/Admin'
import User from '@/views/User'
import Login from '@/views/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/admin',
      name: 'Admin',
      component: Admin,
      meta: {
        requiresAuth: true,
        roles: ['admin']
      }
    },
    {
      path: '/user',
      name: 'User',
      component: User,
      meta: {
        requiresAuth: true,
        roles: ['admin', 'user']
      }
    },
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

2. 创建登录页
在登录页中，用户输入用户名和密码后，将其发送至后端进行验证。验证通过后，后端返回一个包含用户信息和token的响应结果。前端可以将token存储在localStorage或sessionStorage中，以便在后续的请求中携带token。

3. 创建路由守卫
路由守卫可以用来检测用户是否有权限访问某个路由。在路由守卫中，可以检查localStorage或sessionStorage中是否存在token。如果不存在，则跳转到登录页；如果存在，则从token中解析出用户信息，并检查用户是否有权限访问该路由。如果有权限，则继续访问该路由；如果没有权限，则跳转到没有权限的提示页面。

import router from './router'

// 路由守卫
router.beforeEach((to, from, next) => {
  // 判断该路由是否需要登录权限
  if (to.meta.requiresAuth) {
    // 从localStorage中获取token
    const token = window.localStorage.getItem('token')
    if (token) {
      // 解析token，获取用户信息
      const payload = JSON.parse(atob(token.split('.')[1]))
      // 检查用户是否有权限访问该路由
      if (to.meta.roles.includes(payload.role)) {
        next()
      } else {
        next('/unauthorized')
      }
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

4. 根据用户角色展示不同的菜单
在应用的导航栏或侧边栏中，根据用户角色动态地展示不同的菜单。可以通过computed属性计算出当前用户有权限访问的菜单，并将其渲染到视图中。

<template>
  <div>
    <ul>
      <li v-if="showAdminMenu"><router-link to="/admin">管理页面</router-link></li>
      <li v-if="showUserMenu"><router-link to="/user">用户页面</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    showAdminMenu() {
      const token = window.localStorage.getItem('token')
      if (token) {
        const payload = JSON.parse(atob(token.split('.')[1]))
        return payload.role === 'admin'
      } else {
        return false
      }
    },
    showUserMenu() {
      const token = window.localStorage.getItem('token')
      if (token) {
        const payload = JSON.parse(atob(token.split('.')[1]))
        return ['admin', 'user'].includes(payload.role)
      } else {
        return false
      }
    }
  }
}
</script>