一、登录功能的前端处理过程
1、导入项目所需的图片和CSS等静态文件
- 参考代码存放client节点的/opt/code目录下
- 执行如下命令：
- 将参考代码中的css、icon、images等文件夹或文件直接拷贝到当前创建的新项目的src/assets/目录中
2、完成项目中使用的工具类的编写（此处的代码可由学生独立完成，也可以由老师提供，直接导入到项目中）
- 编写或直接导入工具类文件，所有的工具类都放在src/utils目录下
- 在src/utils/message.js中，定义了消息弹窗管理，代码如下：
讯享网
- 在src/utils/request.js中，定义了拦截器，用于拦截“请求”和“响应”，进行身份验证，代码如下：
- 定义login方法，使用POST请求向服务端发送表单数据data，服务端返回的数据包括：登录状态、身份token、权限等信息。
讯享网
- src/store/index.js文件，用于存储token，修改token，并将token存入localStorage
- 登录页面设计：在src/views目录下创建Login目录，然后在Login目录下，创建Login.vue 登录页面
- 初始化表单数据，并定义表单验证规则，例如：如果用户名输入框为空，则提示“请输入登陆账号”
- 处理请求的重定向地址，获取请求的地址，登录后，直接跳转到请求的地址
其中getOtherQuery(query)方法是在下面的代码中定义的方法，返回上一次请求的地址，登录成功后，直接跳转到该地址。
- 提交表单的过程如下：
调用src/api/Login/Login.js中的login方法，向服务端发送请求，登录成功后将用户token和权限保存到本地vuex中，然后跳转到上一次请求的地址。
- 页面样式如下
- 由于当前任务是实现登录功能，所以登录成功后的src/views/Home/Index.vue页面只显示简单的内容即可，详细展示会在后续任务中完成。
除登录页面外，其他显示的页面都嵌套在一个Layout.vue内，且都显示同一个头部内容Header.vue。由于这是在后续任务中完成的工作，所以这里只显示简单的内容即可。
- src/views/Layout/Layout.vue
- src/views/Layout/Header.vue
- 通过vue-router重写路由的push方法，解决相同路径跳转报错的问题
- 设置基本路由规则
- 导航守卫：使用router.beforeEach注册一个全局前置守卫，用于获取Token来判断用户是否登陆，如果没有登录，则跳转到/Login.vue页面
- 在src/main.js中导入 src/store/index 等文件，有些组件，如ECharts报表组件，在当前任务中没有使用，可以先导入暂不使用
- 定义全局属性，以便可以在项目的任意位置使用
- 定义全局响应(response)拦截器和请求(request)拦截器
java算法用户登录信息基础
- 拦截重复请求
- 进入命令行模式，在项目根目录下执行npm run dev命令运行项目（注意：npm默认使用国外镜像，可能会出现连接失败的问题，如出现连接失败可将npm命令切换成cnpm命令）
- 打开浏览器，可以查看到登录页面
1、在后端BigData-KongGuan项目的pom.xml文件中引入 spring-boot-starter-security 包和Redis相关包
- 当前项目使用SpringBoot的WebSecurityConfig安全组件，并使用Redis保存用户token和权限，并为Redis设置过期时间，在前面搭建后端基础框架的任务中，已经在pom.xml文件引入了相关依赖包，打开pom.xml文件可以查看到以下内容。
- 使用自定义身份验证组件TokenAuthenticationProvider
- 在类中添加拦截器，拦截请求，如果非/api/login请求，则执行TokenLoginFilter过滤器进行登录验证，执行TokenAuthenticationFilter进行身份验证。
- com/qrsoft/config/WebSecurityConfig.java类的完整代码如下：
- 登录过程包括4个部分（按①②③④的顺序执行），其中com/qrsoft/filter/TokenLoginFilter.java类是登录的核心过滤器，包括①④两个部分：
- com/qrsoft/filter/TokenAuthenticationProvider.java类是用来处理认证实体，包括②③两个部分
- 在TokenLoginFilter类中的 ① 部分的代码如下（请在TokenLoginFilter类中的相应位置替换为如下代码）：
- 在TokenAuthenticationProvider类中的 ② 部分的代码如下（请在TokenAuthenticationProvider类中的相应位置替换为如下代码）：
- 在TokenAuthenticationProvider类中的 ③ 部分代码如下（请在TokenAuthenticationProvider类中的相应位置替换为如下代码）：
- 在TokenLoginFilter类中的 ④ 部分的代码如下（请在TokenLoginFilter类中的相应位置替换为如下代码）：
- com/qrsoft/filter/TokenAuthenticationFilter.java类是用于身份认证的过滤器，其完整代码如下：
5、因为需要访问MySQL数据库，所以在resources目录下打开application.yml文件（在前面步骤中已经创建），并填写如下配置：
img src='https://s2.51cto.com/images/blog//0_66fdad264e98a73505.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='Java用户登陆后如何获取用户信息_数据库_03' style="width: 1156px; visibility: visible;">
6、项目启动类BigDataKongGuanApplication 的内容如下：
1、启动后端Spring Boot程序。
img src='https://s2.51cto.com/images/blog//0_66fdad26bef0.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='Java用户登陆后如何获取用户信息_vue.js_04' style="width: 1156px; visibility: visible;">
2、启动前端VUE程序。
img src='https://s2.51cto.com/images/blog//0_66fdad272dbd.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=/resize,m_fixed,w_1184' alt='Java用户登陆后如何获取用户信息_vue.js_05' style="width: 1156px; visibility: visible;">
3、输入用户名和密码（例如：admin/admin）进行登录。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/134.html