前言：
在開發后臺管理項目時，多用戶多角色不同權限的場景可以說是非常普遍的。從零開始手寫一個后臺，要考慮的東西很多，這里直接拿網上大家比較熟悉的vue-admin-template后臺模版來進行改造。
也可以看比較完整的前端開發http://www.lxweimin.com/p/12ef029e3ab2
對應視頻教程
先來看下vue-admin-template這個模版的代碼目錄結構
├── build # 構建相關
├── mock # 項目mock 模擬數據
├── public # 靜態資源
│ │── favicon.ico # favicon圖標
│ └── index.html # html模板
├── src # 源代碼
│ ├── api # 所有請求
│ ├── assets # 主題 字體等靜態資源
│ ├── components # 全局公用組件
│ ├── icons # 項目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局樣式
│ ├── utils # 全局公用方法
│ ├── views # views 所有頁面
│ ├── App.vue # 入口頁面
│ ├── main.js # 入口文件 加載組件 初始化等
│ └── permission.js # 權限管理
├── tests # 測試
├── .env.xxx # 環境變量配置
├── .eslintrc.js # eslint 配置項
├── .babelrc # babel-loader 配置
├── .travis.yml # 自動化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
該模版使用了mock數據，可能對于不會mock的人有點生澀，比如作者本人
所以，我打算把mock刪了，自己模擬數據，就是那種自己寫json數據，寫死，后端接口好了，直接請求接口把這些假數據替換下來就ok了。接下來的教程可以比較啰嗦，各位挑著看吧，不喜勿噴，畢竟不是專業做教程的。
第一步，我們先來看看最后的成果展示
login.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
比如我們用財務這個用戶去登錄一下后臺，（先給財務這個角色分配一下權限）
image.png
比如給他分配培訓認證全部的權限
image.png
然后財務管理員登錄后臺,只渲染所擁有的權限動態渲染了側邊欄。
image.png
補充一下：這里是按鈕權限的設置，全局配置一個指令，到時候
v-permission='['add']'就可以實現按鈕是否顯示。
image.png
基本上就是這么個東西，先
添加菜單，在新建一個角色，再給這個角色分配一下權限，然后在新建個用戶，賬號密碼配置一下，再給這個用戶分配一個角色，最后這個用戶登錄后臺，就展示所擁有的權限，動態去渲染側邊欄
第二步 ： 我們先來啟動一下vue-admin-template這個模版，安裝依賴
cnpm install啟動：npm run dev
image.png
image.png
可以看到，全是英文的，我是受不了，（英文爛的一逼，看不懂），側邊欄是手寫的英文，刪掉就好了，element-ui 是英文的，這個要改一下配置。
修改路徑 src/main.js
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式聲明
Vue.use(ElementUI)
這樣就好了image.png
當然要先實現正常登錄，我這里用下真實的登錄接口，修改一下
src/api/user.js
image.png
.env.development
image.png
vue.config.js配置反向代理，然后重啟項目
image.png
箭頭標注的根據實際情況修改
image.png
這樣實際是觸發登錄接口了，為啥沒登錄進去呢，因為登錄成功后，會立即觸發getinfo 這個接口，這個接口請求出錯，就會清除token且又回到登錄頁了。
所以接下來要完善getinfo這個接口，先來看下邏輯
1.執行完登錄請求后，會走permission.js中的邏輯
image.png
可以看到getinfo，所以就要完善getinfo這個接口，同樣換成真實的。
image.png
store/modules/user.js根據實際情況修改下getinfo這個方法，這里看自己公司要求，我們只是取到昵稱和頭像存起來，也可以在這個方法直接把該用戶所擁有的權限拿到并保存到vuex，建議在起一個接口，模擬的話我先在這個方法里把路由信息寫死，然后在定一個存儲到vuex的方法
const getDefaultState = () => {
return {
token: getToken(),
name: '',
avatar: '',
menus: "",//新增
}
}
const mutations = {
RESET_STATE: (state) => {
Object.assign(state, getDefaultState())
},
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
state.name = name
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
// 新增
SET_MENUS: (state, menus) => {
state.menus = menus
}
}
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo().then(response => {
//用戶信息是根據token返回的，
//我們把token放到header里自動帶過去了，這里就把state.token刪掉了
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const { nickname, avatar } = data
// 模擬請求數據
const menus = [
{
"path": "/system",
"redirect": "/menu",
"component": "Layout",
"meta": {
"title": "系統管理",
"icon": "form"
},
"children": [{
"path": "/menu",
"name": "menu",
"component": "menu/index",
"meta": {
"title": "菜單管理",
"icon": "table",
}
},
{
"path": "/roles",
"name": "roles",
"component": "roles/index",
"meta": {
"title": "角色管理",
"icon": "table",
}
},
{
"path": "/administrator",
"name": "administrator",
"component": "dashboard/index",
"meta": {
"title": "用戶管理",
"icon": "table"
}
}
]
}
]
//如果需要404 頁面，請在此處添加
menus.push({
path: "/404",
component: "404",
hidden: true
}, {
path: "*",
redirect: "/404",
hidden: true
})
commit('SET_NAME', nickname)
commit('SET_AVATAR', avatar)
commit("SET_MENUS", menus) // 觸發vuex SET_MENUS 保存路由表到vuex
resolve(data)
}).catch(error => {
reject(error)
})
})
}
getters.js
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
menus: state => state.user.menus //新增
}
export default getters
登錄成功后，可以看到vuex里已經把昵稱和頭像和路由表信息存進去了。
image.png
下面把router.js中的路由先刪掉，保留必要的路由。
export const constantRoutes = [
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/',
component: Layout,
redirect: '/dashboard',
children: [{
path: 'dashboard',
name: 'Dashboard',
component: () => import('@/views/dashboard/index'),
meta: { title: 'Dashboard', icon: 'dashboard' }
}]
}
]
image.png
繼續，可以看到，后端返給我們的是
"component": "Layout",是一個字符串，我們要把過濾下這段路由表信息，并且addrouter到路由里去，并全局掛載一個global.antRouter ，渲染的時候會用到
先在router這個目錄下新建兩個js文件，開發環境和生產環境導入組件的方式略有不同
_import_development.js
// 開發環境導入組件
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+
_import_production.js
// 生產環境導入組件
module.exports = file => () => import('@/views/' + file + '.vue')
然后在permission.js中引入剛創建的js文件
const _import = require('./router/_import_' + process.env.NODE_ENV) // 獲取組件的方法
permission.js改造成下面這樣，不明白的地方看注釋
import router from './router'
import store from './store'
import {
Message
} from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {
getToken
} from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
import Layout from '@/layout'
const _import = require('./router/_import_' + process.env.NODE_ENV) // 獲取組件的方法
NProgress.configure({
showSpinner: false
}) // NProgress Configuration
const whiteList = ['/login'] // no redirect whitelist
router.beforeEach(async (to, from, next) => {
// start progress bar
NProgress.start()
// set page title
document.title = getPageTitle(to.meta.title)
// determine whether the user has logged in
const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({
path: '/'
})
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
// get user info
await store.dispatch('user/getInfo') // 請求獲取用戶信息
if (store.getters.menus.length < 1) {
global.antRouter = []
next()
}
const menus = filterAsyncRouter(store.getters.menus) // 1.過濾路由
console.log(menus);
router.addRoutes(menus) // 2.動態添加路由
global.antRouter = menus // 3.將路由數據傳遞給全局變量，做側邊欄菜單渲染工作
next({
...to,
replace: true
})
// next()
} catch (error) {
// remove token and go to login page to re-login
console.log(error);
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
// // 遍歷后臺傳來的路由字符串，轉換為組件對象
function filterAsyncRouter(asyncRouterMap) {
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') {
route.component = Layout
} else {
route.component = _import(route.component) // 導入組件
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
})
return accessedRouters
}
下面在改造下
layout/components/Sidebar/index.vue
computed: {
...mapGetters([
'sidebar'
]),
routes() {
//return this.$router.options.routes
return this.$router.options.routes.concat(global.antRouter) //把路由concat進去
},
這時候登錄成功會報錯
image.png
原因就是 沒有提前建好頁面。新建一下路由表內的幾個頁面就行了
然后就成功了 有木有！！
image.png
下面我打算換成真實的接口數據，真正實現開篇的成果展示，下面的打算錄制成視頻，對應視頻教程，點我去看視頻
