基于vue實現網站前臺的權限管理(前后端分離實踐)

this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
 this.$router.push({ path: '/' }); //登錄成功之后重定向到首頁
}).catch(err => {
 this.$message.error(err); //登錄失敗提示錯誤
});

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)
 })
 })
 }

router.beforeEach((to, from, next) => {
 if (getToken()) { // 判斷是否取到token
 if (to.path === '/login') {
 next({ path: '/' })
 } else {
 if (store.getters.roles.length === 0) { // 判斷當前用戶是否已獲取完user_info信息
 store.dispatch('GetInfo').then(res => { // 獲取user_info
 const roles = res.data.role
 store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可訪問的路由表
 router.addRoutes(store.getters.addRouters) // 動態添加可訪問路由表
 next({ ...to }) // 放行路由
 })
 }).catch(() => {
 store.dispatch('FedLogOut').then(() => {
 next({ path: '/login' })
 })
 })
 } else {
 next() // 放行該路由
 }
 }
 } else {
 if (whiteList.indexOf(to.path) !== -1) { // 在免登錄白名單里的路徑，繼續讓其訪問
 next()
 } else { // 其他不在白名單里的路徑全部讓其重定向到登錄頁面！
 next('/login')
 alert('not in white list, now go to the login page')
 }
 }
})

export function getToken () {
 return Cookies.get(TokenKey)
}

 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)
 })
 })
 }

 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()
 })
 }