最后
中年危机是真实存在的,即便有技术傍身,还是难免对自己的生存能力产生质疑和焦虑,这些年职业发展,一直在寻求消除焦虑的依靠。
-
技术要深入到什么程度?
-
做久了技术总要转型管理?
-
我能做什么,我想做什么?
-
一技之长,就是深耕你的专业技能,你的专业技术。(重点)
-
独立做事,当你的一技之长达到一定深度的时候,需要开始思考如何独立做事。(创业)
-
拥有事业,选择一份使命,带领团队实现它。(创业)
一技之长分五个层次
-
栈内技术 - 是指你的前端专业领域技术
-
栈外技术 - 是指栈内技术的上下游,领域外的相关专业知识
-
工程经验 - 是建设专业技术体系的“解决方案”
-
带人做事 - 是对团队协作能力的要求
-
业界发声 - 工作经验总结对外分享,与他人交流
永远不要放弃一技之长,它值得你长期
信仰持有
。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue 等等。
// 两个上面使用的方法
function hasPermission(roles, route) {
if (route.meta && route.meta.roles) {
return roles.some(role => route.meta.roles.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)
}
res.push(tmp)
}
})
return res
}
export default {
namespaced: true,
state,
mutations,
actions
}
* src/permission.js
>
> 修改根目录src下的permission.js
>
>
>
if (hasToken) {
if (to.path === ‘/login’) {
next({ path: ‘/’ })
NProgress.done()
} else {
try {
const roles = await store.dispatch(‘user/getInfo’)
await store.dispatch(‘permission/generateRoutes’, roles).then(res => {
router.addRoutes(res)
next({ …to, replace: true })
})
} catch (error) {
await store.dispatch(‘user/resetToken’)
Message.error(error || ‘Has Error’)
next(/login?redirect=${to.path}
)
NProgress.done()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(/login?redirect=${to.path}
)
NProgress.done()
}
}
## 问题一:路由守卫死循环
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210301143610569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk5MzA2NQ==,size_16,color_FFFFFF,t_70)
>
> 如图,按上面配置动态路由后,在进入路由守卫时,不断循环,无法正常转发
>
>
>
其实在路由守卫中,只有`next()`是放行,其他的诸如:`next('/logon') 、 next(to) 或者 next({ ...to, replace: true })`都不是放行,而是:**中断当前导航,执行新的导航**
例如现在我有一个守卫,在守卫中我使用`next('/logon')`,肯定有同学认为是会直接跳转到/logon路由:
beforeEach((to, from, next) => {
next(‘/logon’)
}
其实他是这么执行的:
beforeEach((to, from, next) => {
beforeEach((‘/logon’, from, next) => {
beforeEach((‘/logon’, from, next) => {
beforeEach((‘/logon’, from, next) => {
beforeEac… // 一直循环下去… , 因为我们没有使用 next() 放行
}
}
}
}
`next('/logon')`不是说直接去`/logon`路由,而是中断这一次路由守卫的操作,又进入一次路由守卫,就像嵌套一样,一层路由守卫,然后又是一层路由守卫,此时路由守卫进入到第二层时,`to.path`已经不是`/home`了,这个时候才执行`next()`放行操作。
如果守卫中没有正确的放行出口的话,会一直`next({ ...to})`进入死循环 !!!
因此你还需要确保在当`addRoutes()`已经完成时,所执行到的这一次`beforeEach((to, from, next)`中有一个正确的`next()`方向出口。
**因此想实现动态添加路由的操作的话,代码应该是这样的:**
const hasToken = getToken()[‘Authorization’]
if (hasToken) {
if (to.path === ‘/login’) {
next({ path: ‘/’ })
NProgress.done()
} else {
const hasRoles = store.getters.roles && store.getters.roles.length > 0
if(hasRoles){
next()
}else{
try {
const roles = await store.dispatch(‘user/getInfo’)
await store.dispatch(‘permission/generateRoutes’, roles).then(res => {
router.addRoutes(res)
next({ …to, replace: true })
})
} catch (error) {
await store.dispatch(‘user/resetToken’)
Message.error(error || ‘Has Error’)
next(/login?redirect=${to.path}
)
NProgress.done()
}
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) {
next()
} else {
next(/login?redirect=${to.path}
)
NProgress.done()
}
}
})
getInfo({ commit, state }){
return new Promise((resolve, reject) => {
const { roles } = JSON.parse(getUser())
commit(“SET_ROLES”, roles)
resolve(roles)
})
},
## 问题二:addRouters()不生效
>
> 执行完addRouters()后,我查看了store里的routes,已经有将动态路由添加进去,但是菜单中还是没有显示
>
>
>
>
> 查看了/layout/components/Sidebar/index.vue,发现使用的是this.
>
>
>
>
> r
>
>
> o
>
>
> u
>
>
> t
>
>
> e
>
>
> r
>
>
> .
>
>
> o
>
>
> p
>
>
> t
>
>
> i
>
>
> o
>
>
> n
>
>
> s
>
>
> .
>
>
> r
>
>
> o
>
>
> u
>
>
> t
>
>
> e
>
>
> s
>
>
> 而
>
>
> 不
>
>
> 是
>
>
> s
>
>
> t
>
>
> o
>
>
> r
>
>
> e
>
>
> 中
>
>
> 的
>
>
> ,
>
>
> 所
>
>
> 以
>
>
> 我
>
>
> 们
>
>
> 需
>
>
> 要
>
>
> 在
>
>
> a
>
>
> d
>
>
> d
>
>
> R
>
>
> o
>
>
> u
>
>
> t
>
>
> e
>
>
> r
>
>
> s
>
>
> (
>
>
> )
>
>
> 后
>
>
> 也
>
>
> 修
>
>
> 改
>
>
> t
>
>
> h
>
>
> i
>
>
> s
>
>
> .
>
>
>
> router.options.routes而不是store中的,所以我们需要在addRouters()后也修改this.
>
>
> router.options.routes而不是store中的,所以我们需要在addRouters()后也修改this.router.options.routes的值,或者直接修改下面routes()方法,直接使用store中的routes
>
>
>
routes() {
return this.$router.options.routes
}
**修改后的permission.js**
const roles = await store.dispatch(‘user/getInfo’)
await store.dispatch(‘permission/generateRoutes’, roles).then(res => {
router.addRoutes(res)
router.options.routes = store.getters.routes
next({ …to, replace: true })
})
## 最终版,所有相关文件
* router/index.js
import Vue from ‘vue’
import Router from ‘vue-router’
import Layout from ‘@/layout’
Vue.use(Router)
export const constantRoutes = [
{
path: “”,
redirect: ‘/portal’,
},
{
path: ‘/login’,
component: () => import(‘@/views/login/index’),
},
{
path: ‘/404’,
component: () => import(‘@/views/404’),
},
{
path: ‘/portal’,
component: () => import(‘@/views/portal/index’),
},
{
path: ‘/’,
component: Layout,
redirect: ‘/dashboard’,
children: [{
path: ‘dashboard’,
name: ‘Dashboard’,
component: () =>
import (‘@/views/dashboard/index’),
meta: { title: ‘资源认证平台’, affix: true, icon: ‘dashboard’ }
}]
},
{
path: ‘/user’,
component: Layout,
redirect: ‘/user’,
children: [{
path: ‘user’,
name: ‘User’,
component: () =>
import (‘@/views/user/index’),
meta: { title: ‘用户管理’, affix: true, icon: ‘user’, }
}]
}
// 404 page must be placed at the end !!!
]
export const asyncRoutes = [
{
path: ‘/application’,
component: Layout,
redirect: ‘/application’,
children: [{
path: ‘application’,
name: ‘Application’,
component: () =>
import (‘@/views/application/index’),
meta: { title: ‘应用管理’, affix: true, icon: ‘table’, roles: [‘system’] }
}]
},
{ path: ‘*’, redirect: ‘/404’, hidden: true }
]
const createRouter = () => new Router({
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
总结
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
前端面试题汇总
JavaScript
前端资料汇总