（2）vue-element-admin登录流程梳理
⼀、准备⼯作
项⽬模板采⽤vue-element-admin，使⽤vue和element-ui实现
1.⽬录结构
permission.js
登录流程中，permission.js是最重要的环节，这个⽂件是路由的全局钩⼦（beforeEach和afterEach），全局钩⼦的意思就是每次跳转的时候可以根据情况进⾏拦截，不让他跳转。使⽤场景就是有些页⾯需要登录才能访问，这时候就可以在beforeEach中校验⽤户登录状态来进⾏拦截。
utils/auth.js
设置token到cookie中的操作封装。
router
有关路由的⼀些设置
⼆、登录流程解析
登录页⾯：view/login/index.vue
点击登录按钮后，触发handleLogin⽅法，利⽤validate进⾏表单验证，如果验证通过，调⽤user/login⽅法传递表单⾥的数据，根据.then 回调执⾏this.$router.push⽅法，这个⽅法⽤于跟踪：我是从哪⾥跳到/login页⾯的，登录后我就返回哪⾥。
/user/login⽅法：src/store/modules/user.js
这个⽅法主要做了以下⼯作：登录验证，登录成功后，分别把token保存在vuex和cookie中。
permission.js ：src/permission.js
router.beforeEach(async(to, from, next) => {
// 从cookie中取得token
const hasToken = getToken()
// 如果有token 也就是已经登陆的情况下
if (hasToken) {
// 并且要前往的路径是'/login'  则返回 '/'
if (to.path === '/login') {
next({ path: '/' })
} else {
// 从store中取得⽤户的 roles, 也就是⽤户的权限并且⽤户的权限数组必须有⼀个以上
const hasRoles = les && les.length > 0
// 有权限则直接进⼊
if (hasRoles) {
next()
} else {
// 没有权限的话
try {
// 获取⽤户信息
const { roles } = await store.dispatch('user/getInfo')
/
/ ⽣成可访问路由
const accessRoutes = await store.dispatch('permission/generateRoutes',                                    roles)          // 将可访问路由添加到路由上
router.addRoutes(accessRoutes)
// 进⼊路由
next({ ...to, replace: true })
} catch (error) {
// 如果出现异常清空路由
await store.dispatch('user/resetToken')
// Message提⽰错误
<(error || 'Has Error')
// 跳到login页⾯重新登陆
next(`/login?redirect=${to.path}`)
}
}
}
} else {
// 没有token 也就是没有登陆的情况下
// 判断是否是⽩名单(也就是说不需要登陆就可以访问的路由)
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
// 其他的⼀律给我跳到login页⾯⽼⽼实实的进⾏登陆
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
利⽤beforeEach进⾏访问拦截，如果没登录，跳转到登录页⾯进⾏登录。
user/getInfo：src/store/modules/user.js
getInfo⽤于获取⽤户信息并保存到vuex中，后⾯是⼀堆的数据校验。permission/generateRoutes：src/store/modules/permission.js
// 判断是否有权限
function hasPermission(roles, route) {
if (a && les) {
// roles.some => Array.some 相当于是只要有⼀个满⾜就为true
// 判断⽤户的权限于当前路由访问所需要的权限是否有⼀个满⾜
// ⽐如说⽤户权限为 ['one','two']  当前路由访问所需要权限为 ['two','three']  那么就说明当前⽤户可以访问这个路由    return roles.some(role => les.includes(role))
} else {
// 默认是可访问的
return true
}
}
// ⽣成可访问路由
export function filterAsyncRoutes(routes, roles) {
const res = []
routes.forEach(route => {
const tmp = { ...route }
// 判断当前路由是否可以访问
if (hasPermission(roles, tmp)) {
// 如果当前路由还有⼦路由
if (tmp.children) {
// 进⾏递归处理
tmp.children = filterAsyncRoutes(tmp.children, roles)
}
// 将可访问路由放⼊数组中
vuejs流程图插件res.push(tmp)
}
})
// 返回
return res
}
// 为什么要写这⾥呢，因为后⾯的Sidebar组件与这个环环相扣
const mutations = {
SET_ROUTES: (state, routes) => {
// 添加的路由
state.addRoutes = routes
// 将vuex中的路由进⾏更新
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
// 如果roles包含 'admin' 直接可以全部访问
if (roles.includes('admin')) {
accessedRoutes = asyncRoutes || []
} else {
/
/ 利⽤ filterAsyncRoutes 过滤出可访问的路由
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
// 保存可访问的路由到store中
commit('SET_ROUTES', accessedRoutes)
// 将可访问路由返回
resolve(accessedRoutes)
})
}
}
generateRoutes就是根据得到的⽤户权限⽣成可以访问的路由。
动态路由实现

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。