Vue-04前后端分离鉴权.doc

鉴权: 服务器: 代码实现上： 完成服务器端的编码: 使用PostMan测试: 简单测试登录，传递用户名和密码: 返回的结果: 同时我们检查redis: Postman测试question: 需要携带token: token是从login登录成功后返回token。 Vue登录功能： 我们上面的代码已经实现了服务器端的鉴权. 说明： http协议的无状态，在前面学习过程中，用户登录信息存储在session中.session在服务器端保存状态信息； 客户端可以通过cookie保存信息； 可以通过token的方式来维持状态 可以在客户端localStorage保存信息。 登录流程： 1、首次(第一次)登录的时候，前端表单发送ajax(axios)请求，参数为用户名和密码，调后端的登录接口(上面的步骤已经完成) 2、后端收到请求，接收参数用户名和密码，调用service层，验证成功，返回一个token。 3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面 4、前端每次完成路由跳转，就判断 localStroage 中是否存在token ，如果没有就跳转到登录页面，有则跳转到响应路由页面。 5、在每次调后端接口时，需要统一传递token，可以将token加在请求头中 6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401 7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面 401：未授权。 实现步骤： 安装vuex： /zh/installation.html npm install vuex –save 安装成功! 配置: 登录开始: 观察: changeLogin: 登录成功后保存token: 当我们每次发送新的请求的时候，都会检查本地是否有token,如果有，则连同token一起发送;如果没有，则跳转到登录页面; 导航守卫： 检查token ”导航守卫”来完成: Axios拦截器: 综上: 未登录的时候，请求页面： 登录后: 至此，前后端分离的鉴权功能大致实现.