【面试实录系列】3年前端的第2轮面试
上一期的《【面试实录系列】2年经验的二面经历》反响不错，让不少近期没参加过面试的小伙伴深受启发。
那么今天继续给大家带来面试实录系列，继续让大家了解在真实的面试中，面试官是怎么一步步深入问题，以及面试者的现场表现。
今天的分享重点是项目相关的问题，基础相关的我们就不一一整理面试者的回答了。
下面直接进入面试环节~
你好。请问是XXX么，我是你的二面面试官，我们现在开始电话面试。你这边先做个1～2分钟的自我介绍吧 。
嗯，面试官您好，我叫 XXX, 毕业于XX工业大学计算机专业。之前任职于XX公司，担任前端开发师一职。目前的主要技术栈是vue，react也有过相关的项目实践经验。在职期间做过后台管理系统和电商活动相关的系统，对类似行业的相关开发比较熟悉。因此决定面试电商前端工程师这个岗位，希望能获得此次机会，谢谢～
好，那我们就直接开始吧。你先介绍一下第一个权限管理系统吧
嗯，这个系统是一个在线教育相关的工单系统，主要用户均为客服人员。系统的角色分为：超级管理员，管理员，普通用户。因为没有注册系统，权限都是通过配置完成的。通过配置不同的角色拥有不同的菜单以及按钮级别的权限，以做到权限控制的目的。
你们的权限控制是如何实现的
因为是单页面应用，路由交给前端来控制。我们通过两个方面去实现权限控制。第一是对于大模块的限制，比如需要通过路由跳转的模块，这时需要进行路由拦截；第二是对于小功能的限制，比如一个按钮，如果没有特定权限，那么这个按钮就不显示。
路由拦截你是怎么做的
首先会把所有的页面都放在路由表里，在访问的时候判断一下角色权限。如果有权限就让访问，没有权限的话就拒绝访问，跳转到404页面。我们使用的vue-router，他在构建路由时提供了元信息meta配置接口，可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。
在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，将用户的角色返回。然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问。
那你们信息存储是如何做的？
一般情况下，用户登录后会在本地存储用户的认证信息，可以用 token、cookie 等，我们的项目用的是 token。将用户的token保存到localStorage里，而用户信息则存在内存store中。这样可以在vuex中存储一个标记用户登录状态的属性auth，方便权限控制。
你刚才说到localStorage，这个有过期时间么？
localStorage 的数据可以长期保留。
那如果想设置过期时间怎么做
可以设置一个定时器，定时器结束后可以通过localStorage.setItem()方法设置为空。
还有其他方法么
这个～，不好意思，我不知道了。
那页面刷新的时候权限这块你怎么处理的？
对于页面的权限控制是通过路由钩子控制的 ，页面刷新时候会执行路由钩子，如果权限列表中不存在校验信息则会重新登陆，这样体验不大好。我的做法是，建立一个中间页，如果权限校验不通过，那么跳转至中间页，中间页进行权限的请求，请求到权限后，再判断是否可以跳转，这样的话，刷新页面体验就比较好。
Ok，我们聊一下基础的吧。
下面进入基础环节，由于题目都比较简单，这部分的回答，我们没有整理成文案，大家可以点击对应链接查看答案。
onload怎么用
[1,2,3,4,6,7,9,13,15]=>['1->4','6->7','9','13','15']实现一下
base64 前端如何转化
最后
觉得本文有用的小伙伴，可以帮忙点个“在看”，让更多的朋友看到咱们的文章。
然后，再给“前端面试题宝典”的辅导服务打下广告，目前有简历指导、模拟面试和面试全流程辅导的增值服务，如果有感兴趣的伙伴，可以联系小助手（微信号：interview-fe）了解详情哦~