有關後臺管理系統以前寫過五篇博客,看這篇以前最好先看下這五篇博客。另外這裏只展現關鍵部分代碼,項目代碼放在github上: mall-manage-systemjavascript
一、Vue + Element-ui實現後臺管理系統(1) --- 總述html
二、Vue + Element-ui實現後臺管理系統(2) --- 項目搭建 + ⾸⻚佈局實現vue
三、Vue + Element-ui實現後臺管理系統(3) --- 麪包屑 + Tag標籤切換功能java
四、Vue + Element-ui實現後臺管理系統(4)---封裝一個ECharts組件的一點思路git
五、Vue + Element-ui實現後臺管理系統(5)---封裝一個Form表單組件和Table表格組件 github
這篇主要講解權限相關的功能:vuex
總體效果
api
admin用戶看到的菜單cookie
xiaoxiao用戶看到的菜單佈局
能夠發現不一樣的用戶所看到側邊欄的菜單是不同的。
簡單來說大體須要知足的功能就是:
一、不一樣的用戶會根據權限不一樣,在後臺管理系統渲染不一樣的菜單欄。 二、用戶登錄以後,會獲取路由菜單和一個token,以後跳轉的頁面都須要帶着token。 三、用戶退出登錄,清除動態路由,清除token。跳轉到login頁面。 四、若是當前沒有token,那麼跳轉到任何頁面都應該重定向到login頁面。
登錄操做應該至少要作三件事情
一、獲取當前用戶對應的菜單欄的菜單,並存儲到vuex和cookies中。
二、獲取當前用戶的Token,存儲到vuex和cookie中
三、獲取當前的菜單生成動態路由。
代碼
methods: { login() { this.$http.post('api/permission/getMenu', this.form).then(res => { res = res.data if (res.code === 20000) { //先清除 房子重複加入 this.$store.commit('clearMenu') //再加入 this.$store.commit('setMenu', res.data.menu) //放入token this.$store.commit('setToken', res.data.token) //添加動態路由 this.$store.commit('addMenu', this.$router) //跳轉到首頁 this.$router.push({ name: 'home' }) } else { //若是失敗 提示失敗信息 this.$message.warning(res.data.message) } }) } }
退出登錄所作的事情就和登錄相反,主要作兩件事情一、清除vuex和cookie中的菜單 二、清除vuex和cookie中的token
代碼
logOut() { //清除token this.$store.commit('clearToken') //清除菜單 this.$store.commit('clearMenu') //重定向 通常是登錄頁 location.reload() }
由於是後臺管理系統,因此在咱們在每切換一個路由都須要判斷當前token是否存在,這個時候就須要經過路由守衛來實現。
router.beforeEach((to, from, next) => { // 防止刷新後vuex裏丟失token store.commit('getToken') // 防止刷新後vuex裏丟失標籤列表tagList store.commit('getMenu') let token = store.state.user.token // 過濾登陸頁,由於去登錄頁不須要token(防止死循環) if (!token && to.name !== 'login') { next({ name: 'login' }) } else { next() } })
整個過程你們就是這樣。如今展現vuex相關的代碼。
import Cookie from 'js-cookie' export default { state: { token: '' }, mutations: { //存放token setToken(state, val) { state.token = val Cookie.set('token', val) }, //清空token clearToken(state) { state.token = '' Cookie.remove('token') }, //獲取token getToken(state) { state.token = Cookie.get('token') } }, actions: {} }
import Cookie from 'js-cookie' export default { state: { menu: [] }, mutations: { setMenu(state, val) { //vuex添加 state.menu = val //cookie也添加 Cookie.set('menu', JSON.stringify(val)) }, clearMenu(state) { //清除也同樣 vuex和cookie都清除 state.menu = [] Cookie.remove('menu') }, addMenu(state, router) { if (!Cookie.get('menu')) { return } //取出cookie數據 給vuex let menu = JSON.parse(Cookie.get('menu')) state.menu = menu //添加動態路由 主路由爲Main.vue let currentMenu = [ { path: '/', component: () => import(`@/views/Main`), children: [] } ] //若是是一級菜單 那麼菜單名稱確定有路由 若是是二級菜單那麼一級沒有 二級有路由 menu.forEach(item => { if (item.children) { item.children = item.children.map(item => { item.component = () => import(`@/views/${item.url}`) return item }) currentMenu[0].children.push(...item.children) } else { item.component = () => import(`@/views/${item.url}`) currentMenu[0].children.push(item) } }) //添加動態路由 router.addRoutes(currentMenu) } }, actions: {} }
整個電商後臺管理系統相關內容到這裏就已經寫完了。
別人罵我胖,我會生氣,由於我內心認可了我胖。別人說我矮,我就會以爲可笑,由於我內心知道我不可能矮。這就是咱們爲何會對別人的攻擊生氣。 攻我盾者,乃我心裏之矛(16)