vue实现不同用户登录显示不同页面

实现不同用户登录显示不同页面，可以通过以下步骤：

1. 在后端实现用户登录验证，返回用户的角色信息。
2. 在前端使用路由守卫（router guard），根据用户角色信息进行路由拦截。
3. 根据用户角色信息，动态生成菜单导航和页面内容。

具体实现步骤如下：

1. 实现用户登录验证

在后端实现用户登录验证，可以使用常见的身份验证方式，例如使用用户名和密码进行验证，或者使用单点登录（SSO）等验证方式。验证成功后，需要返回用户的角色信息，例如管理员、普通用户等。

2. 使用路由守卫进行路由拦截

在前端使用路由守卫（router guard），可以拦截用户访问受限页面的请求，根据用户角色信息进行路由拦截。可以在全局路由中注册路由守卫，也可以在需要进行权限控制的路由中注册路由守卫。

例如，以下代码演示了在全局路由中注册路由守卫的实现方式：

// main.js
import router from './router'

router.beforeEach((to, from, next) => {
  const role = sessionStorage.getItem('role')
  if (!role && to.path !== '/login') {
    next('/login')
  } else if (to.meta.permission && !to.meta.permission.includes(role)) {
    next('/403')
  } else {
    next()
  }
})

以上代码中，使用了 `beforeEach` 方法注册了全局路由守卫。在路由跳转之前，判断用户是否登录，如果未登录则跳转到登录页面；如果已登录，则根据用户角色信息判断是否有访问该页面的权限，如果没有则跳转到 403 页面。

3. 根据用户角色信息动态生成菜单导航和页面内容

根据用户角色信息，在前端动态生成菜单导航和页面内容。可以使用 Vue Router 中的嵌套路由（nested routes）实现不同角色用户看到不同的菜单导航和页面内容。

例如，以下代码演示了使用嵌套路由实现不同角色用户看到不同的菜单导航和页面内容的实现方式：

// router.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/views/Home.vue'),
      children: [
        {
          path: 'dashboard',
          component: () => import('@/views/Dashboard.vue'),
          meta: {
            permission: ['admin']
          }
        },
        {
          path: 'profile',
          component: () => import('@/views/Profile.vue'),
          meta: {
            permission: ['admin', 'user']
          }
        }
      ]
    },
    {
      path: '/login',
      component: () => import('@/views/Login.vue')
    },
    {
      path: '/403',
      component: () => import('@/views/Forbidden.vue')
    },
    {
      path: '*',
      component: () => import('@/views/NotFound.vue')
    }
  ]
})

export default router

以上代码中，使用了嵌套路由（nested routes）实现了不同角色用户看到不同的菜单导航和页面内容。在父级路由中定义了公共的页面布局，子路由根据用户角色信息动态生成页面内容。

例如，当用户角色为管理员时，访问 `/dashboard` 路由时会显示管理员专属的页面内容；当用户角色为普通用户时，访问 `/profile` 路由时会显示普通用户专属的页面内容。