SpringCloud + Vue 前后端分离微服务项目（一）

一、简介
开发工具使用:IDEA、Nodejs、Visual Studio Code 、MySQL5.5、JDK1.8
前端使用技术：VUE + EL
后台使用到的技术：OAuth2、Gateway、Zuul2.0、OpenResty + lua、Sentinel、OpenFeign、FastDFS、Elastic-Job(xxl-job)、Zipkin、Hystrix Turbine
GitHub地址：代码还未完全从业务中分离出来，现在正在分离

二、准备工作
从前端开始整个项目前端采用VUe+El,使用到的架构：vue、vuex、vue-router、axios,登录VUE官网可以具体看VUE的使用，有demo "VUE-MANAGE-ADMIN".

三、创建VUE项目
VS创建项目网上有详细教程，本节只讲解VUE中用户登录拦截及token认证存取
项目结构

在登录页面login.vue中引入一个js文件api_user，在api_user中添加方法去获取token，获取成功之后会存取到cookie中,这里也可以存取到session中,关于cookie与session的存取详见“https://blog.csdn.net/qq_3120...”其中解释的很清楚,不同的业务场景应用不同。

api_user.js中使用了axios跨域请求，具体使用官网有详细的介绍，

下面这张图片介绍了axios常用的请求方法，此时整个访问、请求、存取完成。

VUE中的权限路由

整个登录效果

前台展示

可以通过postman验证获取的token