首页分享对花裤衩大叔vue

对花裤衩大叔vue

来源：花匠小妙招时间：2024-12-05 20:32

在这里插入图片描述

前言

预览地址：https://panjiachen.gitee.io/vue-element-admin/#/dashboard
GitHub地址：https://github.com/PanJiaChen/vue-element-admin
文档地址：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

技术点

看vue-element-admin代码，学到的逻辑点。

1. 路由权限生成，src目录下的permission.js文件

// 顶部进度条配置 NProgress.configure({ showSpinner: false }) // NProgress Configuration // 白名单，无需进行路由权限控制，即可访问。 const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist 1234

然后接下来就是全局路由导航守卫的逻辑

// 展示进度条 NProgress.start() // 设置当前路由标题 document.title = getPageTitle(to.meta.title) // 获取token const hasToken = getToken() 123456 如果token有值

// 如果访问的是登录路由 if (to.path === '/login') { // 重定向到首页 next({ path: '/' }) NProgress.done() } 123456 有路由表的情况下

else { // 从vuex中取出role路由表，如果之前缓存过路由表直接跳转 const hasRoles = store.getters.roles && store.getters.roles.length > 0 if (hasRoles) { next() } 123456 无路由表的情况下，一般为初次访问。
先通过vuex请求处理，得到登录用户的标识，如admin、editer等

const { roles } = await store.dispatch('user/getInfo') 1 这是生成路由表的处理，通过获取的用户标识，来动态生成相应的路由表。

const accessRoutes = await store.dispatch('permission/generateRoutes', roles) 1 找到permission.js下的generateRoutes方法。
大概思路就是如果是admin，所有路由返回，如果是其他，通过递归去遍历每个路由是否有权限访问，然后返回。

generateRoutes({ commit }, roles) { return new Promise(resolve => { let accessedRoutes if (roles.includes('admin')) { accessedRoutes = asyncRoutes || [] } else { // filterAsyncRoutes是递归查找路由 accessedRoutes = filterAsyncRoutes(asyncRoutes, roles) } commit('SET_ROUTES', accessedRoutes) resolve(accessedRoutes) }) } } 1234567891011121314

filterAsyncRoutes(routes, roles) { const res = [] routes.forEach(route => { const tmp = { ...route } if (hasPermission(roles, tmp)) { if (tmp.children) { tmp.children = filterAsyncRoutes(tmp.children, roles) } res.push(tmp) } }) return res } 12345678910111213 然后通过router.addRoutes动态添加生成的路由表。

router.addRoutes(accessRoutes) 1 最后通过执行
…to :确保addRoutes已完成
replace : 路由是否可返回

next({ ...to, replace: true }) 1 如果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() } 12345678

2. vuex中工程化导入文件
将modules下的文件自动导入，并挂载到store上
https://webpack.js.org/guides/dependency-management/#requirecontext

// https://webpack.js.org/guides/dependency-management/#requirecontext const modulesFiles = require.context('./modules', true, /.js$/) // you do not need `import app from './modules/app'` // it will auto require all vuex module from modules file const modules = modulesFiles.keys().reduce((modules, modulePath) => { // set './app.js' => 'app' const moduleName = modulePath.replace(/^./(.*).w+$/, '$1') const value = modulesFiles(modulePath) modules[moduleName] = value.default return modules }, {}) const store = new Vuex.Store({ modules, getters })

12345678910111213141516

3. 路由表‘
constantRoutes 和 asyncRoutes 俩个路由数组，分别为公共路由和动态路由。
公共路由即没有权限控制，随便访问。
动态路由即根据登录用户权限动态生成对应的路由。