权限控制-动态生产路由（一）

在后台管理项目中 我们经常会根据不同的用户权限 来动态生成不同的路由导航 以达到权限控制（不同权限生成的路由导航不同）

流程

用户在登录页面输入账号密码---》后端接收判断用户权限---》后端根据不同的用户权限返回对应的导航数据----》前端生成对应的路由导航

重点：动态生成路由

1、 前端页面创建

创建登录页面并设置路由

创建登录页面完成用户登录界面 在views下创建LoginView,vue登录页

<template>
  <div>
    <h1>我是登录页面</h1>
    用户名：<input type="text"/>
    密码：<input type="text"/>
    <button>点我登录</button>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

  

配置登录页路由规则

配置登录页路由规则 在router下的index.js配置路由规则

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [

  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue')
  },
  {
    path:"/",
    redirect:"/login"
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

      

创建首页 并配置路由规则

在views下创建首页 并配置路由规则

<template>
  <div>
    我是首页
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [

  {
    path: '/login',
    name: 'login',
    component: () => import('../views/LoginView.vue')
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path:"/",
    redirect:"/login"
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

根据前期的项目的原型设计 创建不同用户权限的页面

原型设计工具 墨刀 蓝湖 墨客

在views下创建不同权限用户的所有页面

<template>
    <div>
      我是管理员的--用户管理页面
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style scoped>
  div{
      width: 100%;
      height: 500px;
      background-color: rgb(156, 0, 133);
  }
</style>