Vue实现多角色登录，Vue-Router路由守卫控制权限页面

实现页面侧边栏和头部不变，当点击某个功能时，只有主体部分发生变化，这要用到子路由技术

我的项目结构如上，其中包含侧边栏和头部的文件是Manage.vue，主页面是Home.vue，个人页面是Person.vue，用户表单页面时Patient.vue，其中Home.vue，Person.vue，Patient.vue都是Manage.vue的子路由

1.添加子路由

 在父级路由Manage.vue中添加了四个子路由

2.添加<router-view> 

        <el-main>
          <router-view  />
        </el-main>

将主页面部分的代码转换成<router-view>，这样，当我们进入某个子路由路径时，该区域就会显示该路由对应的页面

 效果如下：

主页面： 

用户信息页面： 

可以看到，主页面在变，而侧边栏和头部样式没有改变 

3.添加路由守护

为了防止非管理员角色，通过url路径栏访问到只有管理员才能访问的页面，这时我们就需要在index.js文件中添加路由守卫 

router.beforeEach((to, from, next) => {
    //to 到达的路由信息
    //from 开始的路由信息
    //next 完成页面跳转
    let user = JSON.parse(localStorage.getItem('user') || '{}')
    let adminPaths= ['/patient']
    //如果这个角色不是管理员，并且他访问的路径是管理员才能访问的路径,就让他跳转到403
    if (user.role!=='管理员' && adminPaths.includes(to.path)){
        next('/403')
    }else{
        next()
    }
})

路由守卫中有三个参数，to表示到达的路由信息，from表示开始的路由信息，next表示完成页面跳转

• let adminPaths = ['/patient']  添加管理员才能访问的路径
• adminPaths.includes(to.path)  将adminPaths添加到跳转路径里 

效果展示：

当非管理员角色，访问管理员才能访问的页面，就会跳转到403页面

 4.添加404页面

当用户访问的路径找不到时，就会跳转到404页面，添加404页面的路由

• ' * ' ：表示这个路由将匹配所有未被其他路由匹配到的路径

    {
        path: '*',
        name: '404',
        meta:{name:'无法访问'},
        component:()=> import('../views/404.vue')
    },