SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程09---登录后用户信息获取

简介: SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程09---登录后用户信息获取

本项目开源地址


代码地址


获取用户信息前端


1.在viwes/login.vue

this.$store.dispatch("user/getInfo")


image.png


2.API配置

在src/api/auth/auth.js

// 获取用户信息
export function getUserInfo() {
  return request({
    url: '/auth/user/info',
    method: 'get'
  })
}

3.src\store\modules\user.js

已添加,看看就行

image.png

image-20210212133241834


4.src\utils\request.js


引入,不引入报错信息(store is not defined)

import store from '@/store'
import { getToken } from '@/utils/auth'


添加拦截器

// 2.请求拦截器request interceptor
service.interceptors.request.use(
  config => {
    // 发请求前做的一些处理,数据转化,配置请求头,设置token,设置loading等,根据需求去添加
    // 注意使用token的时候需要引入cookie方法或者用本地localStorage等方法,推荐js-cookie
    if (store.getters.token) {
      // config.params = {'token': token}    // 如果要求携带在参数中
      // config.headers.token = token;       // 如果要求携带在请求头中
      // bearer:w3c规范
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)


5.页面效果


在登录后回去请求info,(我用户谷歌没有请求地址,换成火狐浏览器看的)


image.png

image-20210212134757947

拦截器token


isProtectedUrl方法中添加请求路径,只有登录后(有token才能访问,否则就不能访问)

1.JwtAuthenticationFilter过滤器

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.util.AntPathMatcher;
import org.springframework.util.PathMatcher;
import org.springframework.web.filter.OncePerRequestFilter;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
@Configuration
public class JwtAuthenticationFilter extends OncePerRequestFilter {
    private static final PathMatcher pathMatcher = new AntPathMatcher();
    /**
     * 拦截方法
     *
     * @param request
     * @param response
     * @param filterChain
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        try {
            if (isProtectedUrl(request)) {
//                System.out.println(request.getMethod());
                if (!request.getMethod().equals("OPTIONS")) {
                    // 解析token,如果是我们生成的,则可以解析
                    request = JwtUtil.validateTokenAndAddUserIdToHeader(request);
                }
            }
        } catch (Exception e) {
            response.sendError(HttpServletResponse.SC_UNAUTHORIZED, e.getMessage());
            return;
        }
        filterChain.doFilter(request, response);
    }
    /**
     * 受保护的请求(后期我们替换这些地址)
     *
     * @param request
     * @return
     */
    private boolean isProtectedUrl(HttpServletRequest request) {
        List<String> protectedPaths = new ArrayList<String>();
        protectedPaths.add("/auth/user/info");
        protectedPaths.add("/auth/user/update");
        protectedPaths.add("/post/create");
        protectedPaths.add("/post/update");
        protectedPaths.add("/post/delete/*");
        protectedPaths.add("/comment/add_comment");
        protectedPaths.add("/relationship/subscribe/*");
        protectedPaths.add("/relationship/unsubscribe/*");
        protectedPaths.add("/relationship/validate/*");
        boolean bFind = false;
        for (String passedPath : protectedPaths) {
            bFind = pathMatcher.match(passedPath, request.getServletPath());
            if (bFind) {
                break;
            }
        }
        return bFind;
    }
    @Bean
    public FilterRegistrationBean jwtFilter(){
        FilterRegistrationBean registrationBean = new FilterRegistrationBean();
        JwtAuthenticationFilter filter = new JwtAuthenticationFilter();
        registrationBean.setFilter(filter);
        return registrationBean;
    }
}

修改引导类


image.png

image-20210212140816102


获取用户信息后端


@RequestHeader(value = "userName")这一块比较绕,看视频吧

https://www.bilibili.com/video/BV1Wz4y1U7vC?p=28

1.UmsUserController

@GetMapping("/info")
public ApiResult loginUserInfo(@RequestHeader(value = "userName") String userName) {
    UmsUser umsUser = umsUserService.getOne(
            new LambdaQueryWrapper<UmsUser>().eq(UmsUser::getUsername,userName)
    );
    return ApiResult.success(umsUser);
}

2.测试页面

image.png


目录
相关文章
|
10天前
|
JSON 数据可视化 数据库
vue3+threejs+koa可视化项目——实现登录注册(第三步)
vue3+threejs+koa可视化项目——实现登录注册(第三步)
31 5
|
10天前
|
数据可视化 前端开发 JavaScript
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
52 3
|
10天前
|
JavaScript 数据可视化 算法
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
vue3+threejs可视化项目——搭建vue3+ts+antd路由布局(第一步)
31 6
|
4天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
13 0
|
6天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
10天前
|
JSON 数据可视化 前端开发
vue3+threejs+koa可视化项目——模型文件上传(第四步)
vue3+threejs+koa可视化项目——模型文件上传(第四步)
15 7
|
10天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
19 3
|
11天前
|
JavaScript 前端开发
vue3+ts+element home页面侧边栏+头部组件+路由组件组合页面教程
这是一个Vue.js组件代码示例,展示了带有侧边栏导航和面包屑导航的布局。模板中使用Element Plus组件库,包含可折叠的侧边栏,其中左侧有 Logo 和导航列表,右侧显示更具体的子菜单。`asideDisplay`控制侧边栏宽度。在`script`部分,使用Vue的响应式数据和生命周期钩子初始化路由相关数据,并从localStorage恢复状态。样式部分定义了组件的颜色、尺寸和布局。
16 1
|
11天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
16 1
|
12天前
|
资源调度 JavaScript Linux
VueCLI:Vue项目脚手架与构建工具技术详解
【4月更文挑战第24天】VueCLI是Vue.js官方的项目脚手架,简化创建与配置,提供丰富的插件系统,支持全生命周期功能,如代码编译、打包部署。它具有易于配置、跨平台支持等优势。通过安装、创建项目、运行及构建命令,开发者能快速搭建Vue应用。VueCLI允许自定义配置(vue.config.js)和安装各类插件,如vue-router、vuex,以适应不同项目需求,提高开发效率。