后台管理权限

Question

使用vue + element-ui 搭建了一个后台项目（脚手架搭建），现在需要做后台管理权限问题，由于本人没啥经验, 想请各位指点一下，比如有些页面不显示, 有些按钮不能点击这些怎么去动态生成路由

这是路由index.js的路径

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/components/login'
import home from '@/components/home/home'
// 商品管理->分组管理
import groupingMent from '@/components/manageMent/groupingMent'
import productList from '@/components/manageMent/productList'
import brandMent from '@/components/manageMent/brandMent'
import brandMentli from '@/components/manageMent/brandMentli'
import categoryGoods from '@/components/manageMent/categoryGoods'
import groupedTags from '@/components/manageMent/groupedTags'
import groupCommodity from '@/components/manageMent/groupCommodity'
import setAttribute from '@/components/manageMent/setAttribute'
import catalogueList from '@/components/manageMent/catalogueList'
import editBranddata from '@/components/manageMent/editBranddata'
import twoReclassify from '@/components/manageMent/twoReclassify'
import editorProperty from '@/components/manageMent/editorProperty'
import propertCreate from '@/components/manageMent/propertCreate'
import addGroupedshop from '@/components/manageMent/addGroupedshop'
// 商品管理->商品列表
import saleGoods from '@/components/manageMent/productList/saleGoods'
import tradeChandise from '@/components/manageMent/productList/tradeChandise'
import redactGoods from '@/components/manageMent/productList/redactGoods'
import materialList from '@/components/manageMent/productList/materialList'
import addMerchandise from '@/components/manageMent/productList/addMerchandise'
Vue.use(Router)

export default new Router({
routes: [{

  path: '/login',
  name: '/login',
  component: login
},
{
  path: '/home',
  name: '/home',
  component: home
},
// 商品管理->分组管理
{
  path: '/groupingMent',
  name: '/groupingMent',
  component: groupingMent
},
{
  path: '/productList',
  name: '/productList',
  component: productList
},
{
  path: '/brandMent',
  name: '/brandMent',
  component: brandMent
},
{
  path: '/brandMentli',
  name: '/brandMentli',
  component: brandMentli
},
{
  path: '/categoryGoods',
  name: '/categoryGoods',
  component: categoryGoods
},
{
  path: '/groupedTags',
  name: '/groupedTags',
  component: groupedTags
},
{
  path: '/groupCommodity',
  name: '/groupCommodity',
  component: groupCommodity
},
{
  path: '/setAttribute',
  name: '/setAttribute',
  component: setAttribute
},
{
  path: '/catalogueList',
  name: '/catalogueList',
  component: catalogueList
},

----------------------------------

这是main.js的
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import store from './store'

import './assets/Ueditor/ueditor.config.js'
import './assets/Ueditor/ueditor.all.min.js'
import './assets/Ueditor/lang/zh-cn/zh-cn.js'
import './assets/Ueditor/ueditor.parse.min.js'

import moment from 'moment'

Vue.use(ElementUI)

Vue.config.productionTip = false
Vue.prototype.axios = axios

/ eslint-disable no-new /
new Vue({
el: '#app',
router,
store,
components: {

App

},
template: '<App/>'
})

Answer 1

你可以去github上搜索vue-element-admin,那里有文档和具体项目，你可以参考一下

Answer 2

参考一下 后台管理系统，前后端分离，不同角色看到的页面不同

Answer 3

假如我知道所有的路由路径 在页面直接输入路径访问 是没法阻止的 但是你可以在页面做权限认证
比如当用户进入到这个页面 通过某个标识符或者cookie判断他有没有登录 或者有没有权限
如果没有就跳到一个错误页面 提示他没有权限 如果有就正常访问

Answer 4

严格来说，应该是后端返回菜单，前端来动态生成路由，生成menue（重心后端控制）。
不过我这边，前端+后端一起弄也OK的。
页面不显示:后端根据角色返回状态码（每个页面都有请求接口，带有token，roleID），一旦角色不匹配，返无权限相应状态码，前端立即跳转error页面。
按钮不能点击:也是角色判断啊。即使可以点击，后端也要根据操作角色返回失败成功。