前面博客有vue-element-admin的登录集成：登录集成，本次写个简易版，只需要前端需要的user/login、user/logout、user/info这3个接口，login实现token生成，logout直接退出登录没有操作逻辑，info是拿到login返回token后存在vuex后携带token拿当前user的权限的，把返回的roles列表读取出来，权限是对应不同的路由路径的，后端demo在git上，写的很随意需要可以参考：后端

vue-element-admin环境

npm依赖及问题

api请求修改

后端环境

跨域及解决

用户与权限

返回值封装

接口方法

vue-element-admin环境

链接教程很详细，vue上手快又集成了element-ui，所以拿来就可以用；

npm依赖及问题

① node.js的版本不要太高，建议8版本；

https://nodejs.org/dist/v8.16.0/

② npm install 时候指定淘宝镜像；

npm config set registry https://registry.npm.taobao.org
npm install --registry=https://registry.npm.taobao.org
npm run dev

③ sass依赖报错处理

// 把package.json中版本换了
"sass-loader": "^8.0.0"，更换成了 "sass-loader": "^7.3.1",
npm uninstall sass-loader  //卸载
npm install sass-loader@7.3.1 --save-dev   //安装指定版本

④如果卡在sprintf-js@1.0.3后报错fatal: unable to access ‘https://github.com/nhn/raphael.git/‘，解决比较麻烦，建议把git删了配置，或者用之前node的本地install的modules复制过来，实在没有用我的：

链接：https://pan.baidu.com/s/10CUTWHcq7dB7mvAE-Gg2gg
提取码：6fqe

api请求修改

vue使用axios模块进行前端请求处理，在登录模块只需要上面说的3个接口，在vue-element-admin-master-yzg\src\api\user.js中，分别是post，get，post方法，首次登录携带user返回token，info拿到权限；

import request from '@/utils/request'export function login(data) {return request({url: '/vue-element-admin/user/login',method: 'post',data})
}export function getInfo(token) {return request({url: '/vue-element-admin/user/info',method: 'get',params: { token }})
}export function logout() {return request({url: '/vue-element-admin/user/logout',method: 'post'})
}

把默认的mock请求修改成本地后端的接口env.development：

# base api
#VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8080/'

后端环境

这里提供后端最简易的通过方式；

跨域及解决

首先解决跨域问题不结局后续接口被拦截，用拦截器方法总是报错，因此直接做个配置类，把跨域的请求设置固定的请求头；

package com.yzg.demo.utils;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebFilter(filterName = "CORSFilter", urlPatterns = {"/*"})
@Order(value = 1)
@Configuration
public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {System.out.println("Filter 过滤器 执行 了");HttpServletRequest request = (HttpServletRequest) servletRequest;HttpServletResponse response = (HttpServletResponse) servletResponse;// 响应标头指定 指定可以访问资源的URI路径response.setHeader("Access-Control-Allow-Origin", "*");//响应标头指定响应访问所述资源到时允许的一种或多种方法response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");//设置 缓存可以生存的最大秒数response.setHeader("Access-Control-Max-Age", "3600");//设置  受支持请求标头response.setHeader("Access-Control-Allow-Headers", "*");// 指示的请求的响应是否可以暴露于该页面。当true值返回时它可以被暴露response.setHeader("Access-Control-Allow-Credentials","true");filterChain.doFilter(servletRequest, servletResponse);}@Overridepublic void destroy() {}
}

用户与权限

首次登录login进行用户验证，后面的所有请求必须携带token，或者后端拦截后自己取，因此user对应有role权限，这里为了让验证通过，把所有ueser请求都返回admin用户（固定的）；

package com.yzg.demo.service;import com.yzg.demo.model.user.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collector;
import java.util.stream.Collectors;@Service
public class UserServiceImpl {// 模拟查询库操作public List<User> initUserData(){User user4=new User("admin","admin","111111");List<User> userList=new ArrayList<User>();userList.add(user4);return userList;}public User findByUsername(User user){return initUserData().stream().filter(i->i.getUsername().equals(user.getUsername())).collect(Collectors.toList()).get(0);}public User findUserById(String userId) {return initUserData().stream().filter(i->i.getId().equals(userId)).collect(Collectors.toList()).get(0);}}

package com.yzg.demo.service;
import com.yzg.demo.model.user.Role;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;@Service
public class RoleServiceImpl {public Role getRoleFromToken(String token){List<String> roleList =new ArrayList<String>();roleList.add("admin");String introductions="I am a super administrator";String avatar="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif";String name="Super Admin";return  new Role(name,roleList,introductions,avatar);}
}

返回值封装

前端的接收对象是个json体，因此在方法返回时候要进行注解的转换，为了验证通过，这3个方法的返回体都默认是sucess；

package com.yzg.demo.model.reponse;import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
import com.fasterxml.jackson.annotation.JsonProperty;@JsonIgnoreProperties
public  class BaseResponse {@JsonProperty("code")int code;@JsonProperty("data")Object data;public BaseResponse(int code, Object objectData) {this.code = code;this.data = objectData;}public static  BaseResponse success(Object data){return new BaseResponse(20000,data);}
}

接口方法

一般用户和权限查询都是需要进行数据库操作的，这里咱提供提前预置的数组，接口返回也是看vue前端要什么给什么；

package com.yzg.demo.controller;import com.yzg.demo.annotation.PassToken;
import com.yzg.demo.annotation.UserLoginToken;
import com.yzg.demo.model.reponse.BaseResponse;
import com.yzg.demo.model.user.User;
import com.yzg.demo.service.RoleServiceImpl;
import com.yzg.demo.service.TokenService;
import com.yzg.demo.service.UserServiceImpl;
import com.yzg.demo.utils.TokenUtils;
import io.swagger.annotations.ApiOperation;
import org.json.JSONException;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;@RestController
@RequestMapping("/vue-element-admin/user")
public class UserController {@AutowiredUserServiceImpl userService;@AutowiredTokenService tokenService;@AutowiredRoleServiceImpl roleService;// 登录@ApiOperation(value = "登录接口", notes = "登录接口")@PostMapping("/login")@ResponseBodypublic BaseResponse login(HttpServletResponse response,@RequestBody User inputUser) throws JSONException {User userForBase = new User();inputUser.getUsername();userForBase.setId(userService.findByUsername(inputUser).getId());userForBase.setUsername(userService.findByUsername(inputUser).getUsername());userForBase.setPasswd(userService.findByUsername(inputUser).getPasswd());if (!userForBase.getPasswd().equals(inputUser.getPasswd())) {String info="登录失败,密码错误";return BaseResponse.success(info);} else {String token = tokenService.getToken(userForBase);String info=token;Cookie cookie = new Cookie("token", token);cookie.setPath("/");response.addCookie(cookie);return BaseResponse.success(info);}}// 验证@ApiOperation(value = "info", notes = "info")@GetMapping("/info")@ResponseBodypublic BaseResponse getInfo(){return BaseResponse.success(roleService.getRoleFromToken(""));}//logout@ApiOperation(value = "logout", notes = "logout")@PostMapping("/logout")@ResponseBodypublic BaseResponse logout(){return BaseResponse.success("退出");}@ApiOperation(value = "获取信息", notes = "获取信息")@GetMapping("/checkNow")public String getMessage() {// 取出token中带的用户id 进行操作System.out.println(TokenUtils.getTokenUserId());return "您已通过验证";}}

这样就实现了登录集成；

SpringBoot实践（十七）：与vue-element-admin登录集成相关推荐

vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
SpringBoot实践（十五）：登录的token操作
前后端的REST接口交互需要维持token信息作为鉴权依据,除了首次登录/login接口拿到用户信息外,其他所有接口都需要过interceptor拦截器进行拦截鉴权,而后进行数据交互,用户信息又对应一 ...
Vue Element Admin 添加侧边栏以及他的页面
1. 在 /src/views/ 下添加需要的页面 2. 配置路由器 router 中的路由表 routes,分为 constantRoutes 和 asyncRoutes. 将路由的配置信息添加进路 ...
Vue + Element UI——侧边栏LOGO设计DEMO
GitHub https://github.com/PanJiaChen/vue-element-admin DEMO https://panjiachen.github.io/vue-element ...

SpringBoot实践（十七）：与vue-element-admin登录集成

vue-element-admin环境

npm依赖及问题

api请求修改

后端环境

跨域及解决

用户与权限

返回值封装

接口方法

SpringBoot实践（十七）：与vue-element-admin登录集成相关推荐

最新文章

热门文章