JavaScript 和 ES6
在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
filters: 自定义过滤器
-
icons: 图标
-
layout: 布局组件(页面架构核心)
-
router: 路由配置(路由权限核心模块)
-
store: 状态管理
-
styles: 样式文件
-
utils: 工具方法
-
views: 页面组件
-
permission.js 权限管理
对这项目感兴趣的同学可以自行,有针对性地学习,除了路由权限校验的功能以外,也包含了很多有意思的功能,相信能够学到不少东西。
路由权限控制逻辑
路由处理流程图
路由2.png
路由处理源码分析
我们先找到 permission.js 文件,此处定义全局路由守卫,也是路由权限中非常关键的核心代码。为方便大家阅读,只摘取了跟路由相关的代码
import router from ‘./router’
import store from ‘./store’
import { Message } from ‘element-ui’
import NProgress from ‘nprogress’ // progress bar
import ‘nprogress/nprogress.css’ // progress bar style
import { getToken } from ‘@/utils/auth’ // get token from cookie
NProgress.configure({ showSpinner: false }) // NProgress Configuration
const whiteList = [‘/login’, ‘/auth-redirect’] // 白名单配置
router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
// 有token
if (hasToken) {
if (to.path === ‘/login’)
// 如果当前路径为/login,重定向到首页
next({ path: ‘/’ })
NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
} else {
// determine whether the user has obtained his permission roles through getInfo
const hasRoles = store.getters.roles && store.getters.roles.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) {
// 删除token
await store.dispatch(‘user/resetToken’)
Message.error(error || ‘Has Error’)
// 重定向到登录页面
next(/login?redirect=${to.path}
)
NProgress.done()
}
}
}
} else {
// 没有token
if (whiteList.indexOf(to.path) !== -1) {
// 如果在白名单中,则不需要进行任何校验,直接放行
next()
} else {
// 如果不存在于白名单中,则重定向到登录页面.
next(/login?redirect=${to.path}
)
NProgress.done()
}
}
})
router.afterEach(() => {
// finish progress bar
NProgress.done()
})
注意到,代码中的/login?redirect=${jto.path}, 这里的 redirect 参数主要是用于,在用户登录成功后进行跳转的页面路径。具体功能在/views/login/index.vue 文件下
watch: {
$route: {
handler: function(route) {
const query = route.query
if (query) { //路由查询参数
this.redirect = query.redirect
this.otherQuery = this.getOtherQuery(query)
}
},
immediate: true
}
},
// methods下的:
handleLogin() { // 登录函数
this.$refs.loginForm.validate(valid => {
if (valid) { // 账号密码校验成功后
this.$store.dispatch(‘user/login’, this.loginForm)
.then(() => {
// 直接跳转到this.redirect 路径的页面
this.$router.push({ path: this.redirect || ‘/’, query: this.otherQuery })
this.loading = false
})
} else {
// …
}
})
},
动态路由配置
我们先来看看路由的定义,在/src/router/index.js 文件下
export const constantRoutes = [ // 用来定义普通的路由配置,不需要访问权限的
// 路由配置对象
]
export const asyncRoutes = [ // 通过路由元信息meta.roles来设置访问权限,一般来说是个数组
{
path: ‘/permission’,
component: Layout,
redirect: ‘/permission/page’,
alwaysShow: true, // will always show the root menu
name: ‘Permission’,
meta: {
title: ‘Permission’,
icon: ‘lock’,
roles: [‘admin’, ‘editor’] // 通过roles设置路由的权限
},
// …
}
]
动态添加路由时,本质上就是根据用户的角色信息在 asyncRoutes 路由配置数组中进行路由筛选,找到相对应的路由,与 constantRoutes 合并生成最新的路由。
动态添加路由逻辑图
动态路由生成.png
动态路由生成.png
动态路由源码分析
代码入口: permission.js
const accessRoutes = await store.dispatch(‘permission/generateRoutes’, roles)
permission/generateRoutes 方法入口文件:/strore/modules/permissions.js
import { asyncRoutes, constantRoutes } from ‘@/router’
const state = {
routes: [],
addRoutes: []
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = routes
state.routes = constantRoutes.concat(routes)
}
}
const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
let accessedRoutes
if (roles.includes(‘admin’)) {
// 如果包含了admin,则说明是admin,具有所有模块的访问权限
accessedRoutes = asyncRoutes || []
} else {
// 如果不是管理员,则需要根据用户角色roles和异步路由进行筛选
accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
}
// 将最终的结果存放到vuex中
commit(‘SET_ROUTES’, accessedRoutes)
// resolve出去
resolve(accessedRoutes)
})
}
}
对异步路由进行筛选,并将最终的结果存放到 vuex 中,并将结果 resolve 出去
export function hasPermission(roles, route) {
if (route.meta && route.meta.roles) { // 如果存在meta.roles
// 只要meta.roles中存在与用户角色列表中相同的值,则说明具有访问权限
return roles.some(role => route.meta.roles.includes(role))
} else {
// 不存在meta或者是不存在meta.roles,则说明是通用模块,直接放行
return true
}
}
下面是我在学习HTML和CSS的时候整理的一些笔记,有兴趣的可以看下:
进阶阶段
进阶阶段,开始攻 JS,对于刚接触 JS 的初学者,确实比学习 HTML 和 CSS 有难度,但是只要肯下功夫,这部分对于你来说,也不是什么大问题。
JS 内容涉及到的知识点较多,看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学,我是不建议的,毕竟刚接触 JS 谁能看得下去,当时我也不能,也没那样做。
我这部分的学习技巧是,增加次数,减少单次看的内容。就是说,第一遍学习 JS 走马观花的看,看个大概,去找视频以及网站学习,不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。
然后通过一些网站的小例子,开始动手敲代码,一定要去实践、实践、实践,这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点,眼高手低可不是个好习惯,我在这吃过亏,你懂的。
1、JavaScript 和 ES6
在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。
2、前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
以 Vue 为例,我整理了如下的面试题。