登录鉴权功能是后台管理项目的基本需求，登录掌握，权限分配，这些都是很普遍的功能。 在框架中已经做好了这部分的事情，我们来理解一下是怎么做的，对往后在框架的根本上做改进是有很大的帮助的。
在此之前思考过很多种方法去做登录功能，一种比较靠谱的方法是用一个Node做事端，利用Node+express+passport的技能栈
Passport项目是一个基于Nodejs的认证中间件，支持本地登录和第三方账号登录验证。Passport目的只是为了“上岸认证”，因此，代码干净，易掩护，可以方便地集成到其他的运用中。
Web运用一样平常有2种上岸认证的形式：
用户名和密码认证上岸
OAuth认证上岸
Passport可以根据运用程序的特点，配置不同的认证机制。
项目网站：http://passportjs.org/
Passport是十分强大的，这个技能栈也是非常靠谱的，但是我们就一个纯前端框架，须要再做一个Node的做事端吗？掩护起来多麻烦，况且违背了Unix哲学的'大略原则'----只管即便用大略的方法办理问题----是'Unix哲学'的根本原则。这也便是著名的KISS（keep it simple, stupid），意思是'保持大略和笨拙'。。
既然这样不太好，那就利用单页运用强大的路由来做登录。
如果对vue-router还不熟习的同学一定要找尤大大课后开小灶了,官方文档：vue-router
截取一段先容
你可以利用 router.beforeEach 注册一个全局的 before 钩子：
当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析实行，此时导航在所有钩子 resolve 完之前一贯处于 等待中。
每个钩子方法吸收三个参数：
to: Route: 即将要进入的目标 路由工具
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。实行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子实行完了，则导航的状态便是 confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器退却撤退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
确保要调用 next 方法，否则钩子就不会被 resolved。
以是wz框架采取的是拦截导航，判断登录与否和是否有权限，让它完成连续跳转或重定向到登录界面。
这篇教程分为两部分一部分讲登录，另一部分讲权限验证，由于篇幅太长以是须要用两篇来写。
登录流程是在客户端发送账号密码到做事端，做事端验证成功后返回token存储用户的权限，前端用Cookie把token存储在本地，在路由跳转（router.beforeEach）中止定是否存在token，其余前端可以通过token要求做事端获取userInfo，在vuex中存储着用户的信息（用户名，头像，注册韶光等等）。
权限掌握便是在路由跳转（router.beforeEach）中止定token中的权限和要去往(to)页面的路由信息(router meta)中配置的权限是否匹配，同时我们的侧边栏也是根据权限动态天生的，当所登录的账号没有权限访问时，就不显示在侧边栏中（例如访客登录就无法看到编辑器的侧边栏选项），这样用户既看不到侧边栏选项，又无法直接访问到，双重掌握更安全。
登录界面只有两个输入框，由于不是对外网站以是就没做注册功能。
首先来看登录界面login.vue的逻辑。
src/views/login/index.vue
利用了iview的form表单，autoComplete属性是自动添补默认值到输入框里，这里是用户名amdin@wz.com，
@keyup.enter.native=\"大众handleLogin\公众属性，当按下enter键时会自动触发handleLogin函数，不须要再点击登录按钮，符合日常登录习气。
当输入账号密码点击登录按钮会触发handleLogin函数。
个中的逻辑是，获取页面表单中的数据（账号密码）通过表格validate验证精确性，依照的规范便是我们在data属性中定义的。
账号密码必须填写，密码不能小于6位，账号必须因此wz.com结尾的电子邮箱地址， 或者可以定义更严密的规范。 如果不遵守制订的规范，将会无法上岸。
千万不要相信用户的输入！
千万不要相信用户的输入！
千万不要相信用户的输入！
除非你想遭受XSS攻击。
如果有同学还不理解什么是XSS攻击，那么一定要赶紧去理解。
下面敲黑板了！
划重点！
XSS是一种常常涌如今web运用中的打算机安全漏洞，它许可恶意web用户将代码植入到供应给其它用户利用的页面中。比如这些代码包括HTML代码和客户端脚本。攻击者利用XSS漏洞旁路掉访问掌握——例犹如源策略(same origin policy)。这种类型的漏洞由于被黑客用来编写危害性更大的网络钓鱼(Phishing)攻击而变得广为人知。对付跨站脚本攻击，黑客界共识是：跨站脚本攻击是新型的“缓冲区溢出攻击“，而JavaScript是新型的“ShellCode”。
其重点是“跨域”和“客户端实行”。有人将XSS攻击分为三种，分别是：
1. Reflected XSS（基于反射的XSS攻击）
2. Stored XSS（基于存储的XSS攻击）
3. DOM-based or local XSS（基于DOM或本地的XSS攻击）
Reflected XSS基于反射的XSS攻击，紧张依赖站点做事端返回脚本，在客户端触发实行从而发起Web攻击。
例子：
1. 做个假设，在淘宝搜索书本，搜不到书的时候显示提交的名称。
2. 在搜索框搜索内容，填入“<script>alert('handsome boy')</script>”, 点击搜索。
3. 当前端页面没有对返回的数据进行过滤，直接显示在页面上， 这时就会alert那个字符串出来。
4. 进而可以布局获取用户cookies的地址，通过QQ群或者垃圾邮件，来让其他人点击这个地址：
Stored XSS
基于存储的XSS攻击，是通过揭橥带有恶意跨域脚本的帖子/文章，从而把恶意脚本存储在做事器，每个访问该帖子/文章的人就会触发实行。
例子：
1. 发一篇文章，里面包含了恶意脚本
2. 后端没有对文章进行过滤，直接保存文章内容到数据库。
3. 当其他看这篇文章的时候，包含的恶意脚本就会实行。
PS：由于大部分文章是保存全体HTML内容的，前端显示时候也不做过滤，就极可能涌现这种情形。
DOM-based or local XSS基于DOM或本地的XSS攻击。一样平常是供应一个免费的wifi，但是供应免费wifi的网关会往你访问的任何页面插入一段脚本或者是直接返回一个钓鱼页面，从而植入恶意脚本。这种直接存在于页面，无须经由做事器返回便是基于本地的XSS攻击。
例子：
1. 供应一个免费的wifi。
1. 开启一个分外的DNS做事，将所有域名都解析到我们的电脑上，并把Wifi的DHCP-DNS设置为我们的电脑IP。
2. 之后连上wifi的用户打开任何网站，要求都将被我们截取到。我们根据http头中的host字段来转发到真正做事器上。
3. 收到做事器返回的数据之后，我们就可以实现网页脚本的注入，并返回给用户。
4. 当注入的脚本被实行，用户的浏览器将依次预加载各大网站的常用脚本库。
以是一定要对用户的输入做一个过滤。否则后台都被别人给黑了，老板不炒你鱿鱼才怪。
当我们输入禁绝确的账号密码时将会自动验证（输入完立即验证而不是等到点击登录才验证），如果禁绝确将无法登录。
如果符合验证规则，则会触发vuex中的LoginByEmail
src/store/modules/user.js
把email和password发送到做事器，接管返回来的数据，将token存入 Cookies，并触发vuex SET_TOKEN及SET_EMAIL事宜，存入到vuex全局状态里。
loginByEmail
src/api/login.js
发送fetch要求到指定的url。这里的url是本地做事器的地址，本项目由于是纯前端项目，以是利用了 mock.js。
有了这个插件，前端就可以独立后端开拓。
在mock.js中这行代码截获了所有/login/loginbyemail 路径的要求，利用loginAPI.loginByEmail处理这个要求
可以看到loginByEmail的浸染是把账户信息返回前端，例如一个用户是管理员，就把匹配到的admin的账户信息返回去。
当得到了admin的账户信息，就把它存储在cookie里
这样一来在login.js中止定token是否存在，如果存在token，就连续路由跳转，如果不存在，就跳转到登录界面。
src/login.js
src/store/modules/user.js
vuex中是这样定义的，相称于直接Cookies.get()，为什么要分开呢？显然是为了模块化，方便日后改动项目。
vuex会从cookies里面取得token的值，这样就能通过验证去往路由的下个页面。
接下来的教程讲一下封装UI组件、router、webpack、node命令行构建工具等内容。
希望大家看了这系列教程都能制作出自己的前端框架，从而在事情中得心应手。
如果喜好就点个start鼓励下作者吧。
