本文主要介紹了基于vue實(shí)現(xiàn)網(wǎng)站前臺(tái)的權(quán)限管理(前后端分離實(shí)踐)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望能幫助到大家。

Javascript做為當(dāng)下的熱門(mén)語(yǔ)言，用途很廣泛，從前端到后端處處可見(jiàn)其存在，該技術(shù)如今在我們項(xiàng)目?jī)?nèi)部也大量使用來(lái)開(kāi)發(fā)諸如CMS系統(tǒng)以及其他其他一些數(shù)據(jù)分析系統(tǒng)的前端頁(yè)面，為此個(gè)人非常感興趣并將其作為帽子卡的擴(kuò)展內(nèi)容來(lái)進(jìn)行課余學(xué)習(xí)。

Javascript框架鱗次櫛比，但基本原理大致相同，因此選用國(guó)內(nèi)人開(kāi)發(fā)的vue.js進(jìn)行一個(gè)初步的嘗試。學(xué)習(xí)vue.js也一周多的時(shí)間了，說(shuō)起vue的主要用法，無(wú)外乎Declarative Rendering、Component System、Client-side Routing、Vue-resource、Axios以及視項(xiàng)目大小而決定是否使用的Vuex，學(xué)習(xí)vue事小，主要轉(zhuǎn)變思維，面向前后端分離的組件式web開(kāi)發(fā)才是真正想去實(shí)踐的。

正好我的個(gè)人網(wǎng)站CodeSheep最近要開(kāi)發(fā)后臺(tái)管理，因此正好用vue這一套來(lái)實(shí)現(xiàn)了一下。說(shuō)到后臺(tái)管理，繞不開(kāi)的問(wèn)題就是權(quán)限的管理。既然想實(shí)踐前后端分離這種思想，因此后臺(tái)管理的所有web前端的東西應(yīng)該獨(dú)立由前端完成，這其中就包括很重要的由前端來(lái)根據(jù)權(quán)限進(jìn)行相關(guān)東西的控制。我們想要做到的是：不同的權(quán)限對(duì)應(yīng)著不同的路由，同時(shí)頁(yè)面?zhèn)冗厵谝矐?yīng)該根據(jù)不同的權(quán)限，來(lái)異步生成對(duì)應(yīng)的菜單，講白了就是后臺(tái)管理時(shí)不同權(quán)限的用戶其看到的界面菜單是不一樣的，因此有了這里實(shí)現(xiàn)登錄和權(quán)限驗(yàn)證的一套流程。

具體實(shí)現(xiàn)

1、點(diǎn)擊“登錄”按鈕觸發(fā)登錄事件

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {

this.$router.push({ path: '/' }); //登錄成功之后重定向到首頁(yè)

}).catch(err => {

this.$message.error(err); //登錄失敗提示錯(cuò)誤

});

其中異步觸發(fā)的actions LoginByEmail的處理內(nèi)容如下：

LoginByEmail ({ commit }, userInfo) {

const email = userInfo.email.trim()

return new Promise((resolve, reject) => {

loginByEmail(email, userInfo.password).then(response => {

const data = response.data

setToken(response.data.token)

commit('SET_TOKEN', data.token)

resolve()

}).catch(error => {

reject(error)

})

})

}

很容易看出想做的是將從服務(wù)器端拿到的token(唯一標(biāo)示用戶身份)放到瀏覽器本地Cookie中去

2、全局鉤子router.beforeEach中攔截路由

這一步是核心，具體處理流程示意如下：

路由攔截處理流程

具體代碼如下：

router.beforeEach((to, from, next) => {

if (getToken()) { // 判斷是否取到token

if (to.path === '/login') {

next({ path: '/' })

} else {

if (store.getters.roles.length === 0) { // 判斷當(dāng)前用戶是否已獲取完user_info信息

store.dispatch('GetInfo').then(res => { // 獲取user_info

const roles = res.data.role

store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問(wèn)的路由表

router.addRoutes(store.getters.addRouters) // 動(dòng)態(tài)添加可訪問(wèn)路由表

next({ ...to }) // 放行路由

})

}).catch(() => {

store.dispatch('FedLogOut').then(() => {

next({ path: '/login' })

})

})

} else {

next() // 放行該路由

}

}

} else {

if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單里的路徑，繼續(xù)讓其訪問(wèn)

next()

} else { // 其他不在白名單里的路徑全部讓其重定向到登錄頁(yè)面！

next('/login')

alert('not in white list, now go to the login page')

}

}

})

流程圖中幾個(gè)重要步驟解釋一下：

判斷前端是否取到了token令牌：getToken()

操作很簡(jiǎn)單，主要是從Cookie中獲取，看token是不是已經(jīng)拿到了：

export function getToken () {

return Cookies.get(TokenKey)

}

vuex異步操作store.dispatch('GetInfo')：獲取用戶信息

GetInfo ({ commit, state }) {

return new Promise((resolve, reject) => {

getInfo(state.token).then(response => {

const data = response.data

console.log(data)

commit('SET_ROLES', data.role)

commit('SET_NAME', data.name)

resolve(response)

}).catch(error => {

reject(error)

})

})

}

操作也很簡(jiǎn)單，用一個(gè)get的restful api從服務(wù)器獲取用戶的角色和名字

vuex異步操作store.dispatch('GenerateRoutes', { roles })：根據(jù)不同的roles來(lái)生成不同的前臺(tái)路由

GenerateRoutes ({ commit }, data) {

return new Promise(resolve => {

const { roles } = data

let accessedRouters

if (roles.indexOf('admin') >= 0) {

accessedRouters = asyncRouter

} else {

accessedRouters = filterAsyncRouter(asyncRouter, roles)

}

commit('SET_ROUTERS', accessedRouters)

resolve()

})

}

從代碼中可以看出，我這是只區(qū)分了管理員角色admin和其他普通用戶(即非Aadmin兩種權(quán)限)

該系列的實(shí)踐后續(xù)還將嘗試更多，將會(huì)一一撰帖成文，我也是個(gè)初學(xué)者，路漫漫而求索之。。。

相關(guān)推薦：

總結(jié)

以上是生活随笔為你收集整理的php前台用户权限开通,vue实现网站前台的权限管理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。