devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue-element-admin 登陆_vue-element-admin登录

作者：繁依Fanyi0 | 2024-02-19 01:19:17

赞

踩

vue-element-admin登录

后端：javaWeb（SpringMvc+mybatis）

数据库：Mysql

前端：vue-element-admin

前言：

        使用vue-element-admin封装好的登陆接口，与自己后端的接口相匹配，完成登陆页面的跳转。

        对于正常登陆来说，vue-element-admin对每一个页面请求都设置有拦截器，封装有token的方法，每次在发送请求时，都会找寻浏览器中的Cookice是否存有token值，如果有则每次发送请求时，携带token，与后端交互。如果没有，vue-element-admin会直接跳到首页，重新登陆。

        后端通过设置拦截器获取token，用token值，再转义成明文用户名或密码(之前设置token用什么映射数据库实体类的对象名保持一致)，之后经过数据库查询是否有此对象，有则，正常请求，没有则代表token失效、错误等代表此次请求不允许，vue-element-admin接收到后端的token失败反馈后，跳转到登陆页面。

后端简述：共计两个对外的接口，

①、通过前端接受的账号和密码查询数据库验证账号和密码是否正确，正确则使用jwt将用户名和密码转移为token，之后返回给前端指定数据。

②、页面跳转请求时先单独携带token令牌发送给后端，进行验证，是否是登陆状态，是再允许之后的请求，不是则返回规定的数据格式。

JWT依赖、JSON依赖：

JWT：生成token的一种方式

JSON：前后端传输数据的格式

  1.         //jwt依赖
  2.         <dependency>
  3.             <groupId>com.auth0</groupId>
  4.             <artifactId>java-jwt</artifactId>
  5.             <version>4.4.0</version>
  6.         </dependency>
  7.         //由于我使用的后端接受格式是JSON，所以又需要的JSON依赖
  8.         <dependency>
  9.             <groupId>com.fasterxml.jackson.core</groupId>
  10.             <artifactId>jackson-core</artifactId>
  11.             <version>${jackson_version}</version>
  12.         </dependency>
  13.         <dependency>
  14.             <groupId>com.fasterxml.jackson.core</groupId>
  15.             <artifactId>jackson-databind</artifactId>
  16.             <version>${jackson_version}</version>
  17.         </dependency>
  18.         <dependency>
  19.             <groupId>com.fasterxml.jackson.core</groupId>
  20.             <artifactId>jackson-annotations</artifactId>
  21.             <version>${jackson_version}</version>
  22.         </dependency>

注意项：

如果只是想使用简单的编写接口就实现登陆页面的功能，那么返回前端规定的接受数据格式，后端

返回指定的数据格式就可以了。具体代码如下：

  1.                 loginDto loginDto = new loginDto();
  2.                 loginDto.setName(user.getUserName());//姓名
  3.                 loginDto.setAvatar(user.getAvatar());//头像
  4.                 loginDto.setIntroduction("个性签名");//签名
  5.                 List<String> roles = new ArrayList();//注意此属性前端规定，必须是数组结构。
  6.                 roles.add("admin");//角色
  7.                 loginDto.setRoles(roles);
  8.                 return new Result(20000, "登录成功", loginDto);

代码一：

目录：/src/api/index.js

需要更改处：账号名：userEmail 密码：password

  1. <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
  2.  
  3.       <div class="title-container">
  4.         <h3 class="title">
  5.           WMS 登陆
  6.         </h3>
  7.         <lang-select class="set-language" />
  8.       </div>
  9.  
  10.       <el-form-item prop="userEmail">
  11.         <span class="svg-container">
  12.           <svg-icon icon-class="user" />
  13.         </span>
  14.         <el-input
  15.           ref="userEmail"
  16.           v-model="loginForm.userEmail"
  17.           placeholder="请输入用户名……"
  18.           name="userEmail"
  19.           type="text"
  20.           tabindex="1"
  21.           autocomplete="on"
  22.         />
  23.       </el-form-item>
  24.  
  25.       <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
  26.         <el-form-item prop="password">
  27.           <span class="svg-container">
  28.             <svg-icon icon-class="password" />
  29.           </span>
  30.           <el-input
  31.             :key="passwordType"
  32.             ref="password"
  33.             v-model="loginForm.password"
  34.             :type="passwordType"
  35.             placeholder="请输入密码……"
  36.             name="password"
  37.             tabindex="2"
  38.             autocomplete="on"
  39.             @keyup.native="checkCapslock"
  40.             @blur="capsTooltip = false"
  41.             @keyup.enter.native="handleLogin"
  42.           />
  43.           <span class="show-pwd" @click="showPwd">
  44.             <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
  45.           </span>
  46.         </el-form-item>
  47.       </el-tooltip>
  48.  
  49.       <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
  50.         登陆
  51.       </el-button>
  52.     </el-form>

代码二：

目录：src/api/user.js

  1. import request from '@/utils/request'
  2.  
  3. export function login(data) {
  4.   return request({
  5.     url: 'http://xxx/login',//后端登陆接口
  6.     method: 'get',//请求方式
  7.     //请求参数--JSON格式，对应的是登录时，填入的账号和密码数据
  8.     params: {
  9.       userEmail: data.userEmail,
  10.       password: data.password
  11.     }
  12.   })
  13. }
  14.  
  15. export function getInfo(token) {
  16.   return request({
  17.     url: 'http://xxx/getLogin',//携带token的请求，判断登陆状态
  18.     method: 'get',//请求方式
  19.     params: { token }//请求参数--JSON格式(读取的是浏览器的Cookice保存的值'token'名字不需要修改)
  20.   })
  21. }
  22.  
  23. export function logout() {
  24.   return request({
  25.     url: '/vue-element-admin/user/logout',
  26.     method: 'post'
  27.   })
  28. }

代码三：

根目录下：/permission.js 相当于拦截器   代码不需要修改

  1. router.beforeEach(async(to, from, next) => {
  2.   // start progress bar
  3.   NProgress.start()
  4.  
  5.   // set page title
  6.   document.title = getPageTitle(to.meta.title)
  7.  
  8.   // determine whether the user has logged in
  9.   const hasToken = getToken()
  10.     //能在Cookice中读取出token值运行下面代码
  11.   if (hasToken) {
  12.     if (to.path === '/login') {
  13.       // if is logged in, redirect to the home page
  14.       next({ path: '/' })
  15.       NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
  16.     } else {
  17.       // determine whether the user has obtained his permission roles through getInfo
  18.       const hasRoles = store.getters.roles && store.getters.roles.length > 0
  19.       if (hasRoles) {
  20.         next()
  21.       } else {
  22.         try {
  23.           // get user info
  24.           // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
  25.         //调用请求，将token发送给后端，判断该用户的登陆状态。
  26.           const { roles } = await store.dispatch('user/getInfo')
  27.  
  28.           // generate accessible routes map based on roles
  29.           const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
  30.  
  31.           // dynamically add accessible routes
  32.           router.addRoutes(accessRoutes)
  33.  
  34.           // hack method to ensure that addRoutes is complete
  35.           // set the replace: true, so the navigation will not leave a history record
  36.           next({ ...to, replace: true })
  37.         } catch (error) {
  38.            //通过接收值判断roles返回值是否为数组，且返回值也相当于一个权限符，在路由中对应页面中能操作的左侧状态栏
  39.           // remove token and go to login page to re-login
  40.           await store.dispatch('user/resetToken')
  41.           Message.error(error || 'Has Error')
  42.           next(`/login?redirect=${to.path}`)
  43.           NProgress.done()
  44.         }
  45.       }
  46.     }
  47.   } else {//读取不到token值，默认没有登陆过，直接跳转到首页，开始进行登陆。
  48.     //白名单，为了将登录页进行排除。如果不设置白名单，则会出现，在登陆请求之前，先通过token获取登陆状态，肯定是没有进行登陆的，那么就不会进行之后登陆请求，会直接跳转到登陆页面再次进行登陆，陷入死循环。
  49.     /* has no token*/
  50.     if (whiteList.indexOf(to.path) !== -1) {
  51.       // in the free login whitelist, go directly
  52.       next()
  53.     } else {
  54.       // other pages that do not have permission to access are redirected to the login page.
  55.       next(`/login?redirect=${to.path}`)
  56.       NProgress.done()
  57.     }
  58.   }
  59. })

代码四：

目录：src/stotre/modules/user.js   不需要修改

  1. // get user info--这是前端每次携带token的请求
  2.   getInfo({ commit, state }) {
  3.     return new Promise((resolve, reject) => {
  4.       getInfo(state.token).then(response => {
  5.         const { data } = response
  6.         if (!data) {
  7.           reject('Verification failed, please Login again.')
  8.         }
  9.         //前端规定的固定数据数据(roles, name, avatar, introduction)
  10.         const { roles, name, avatar, introduction } = data
  11.  
  12.         // roles must be a non-empty array
  13.         if (!roles || roles.length <= 0) {
  14.           reject('getInfo: roles must be a non-null array!')
  15.         }
  16.         commit('SET_ROLES', roles)
  17.         commit('SET_NAME', name)
  18.         commit('SET_AVATAR', avatar)
  19.         commit('SET_INTRODUCTION', introduction)
  20.         resolve(data)
  21.       }).catch(error => {
  22.         reject(error)
  23.       })
  24.     })
  25.   },

前端需要

1、修改user.jsp中的两个请求地址、发送参数、发送方式。

2、修改index.jsp中的参数名，也可以不对应，只有后端将两个不同的参数名绑定在一起也可以实现。（后端入参可以使用@Param("前端发送参数名" ) 数据类型 后端参数名 对应）

后端代码

需求根据个人需求，添加相关代码，

接口方法代码片段如下：

  1. @RequestMapping(value = "/login")
  2.     public Result login(String userEmail, String password) {
  3.         System.out.println("有登陆请求过来……");
  4.         System.out.println("userEmail:" + userEmail);
  5.         System.out.println("password:" + password);
  6.         Map<String, Object> map = new HashMap<>();
  7.         User admin = userService.getAdmin(userEmail, password);
  8.         System.out.println("数据库查询结果:" + admin);
  9.         if (admin == null) {
  10.             map.put("code", 30000);
  11.             map.put("msg", "登陆失败");
  12.             return new Result(30000, "登陆失败");
  13.         } else {
  14.             String token = JwtUtils.sign(userEmail, password);
  15.             //map.put("userEmail", userEmail);
  16.             map.put("token", token);
  17.  
  18.             Result result = new Result();
  19.             result.setCode(20000);
  20.             result.setMsg("登陆成功");
  21.             result.setData(map);
  22.             System.out.println(result);
  23.             return result;
  24.         }
  25.     }
  26.     //请求查询登陆状态
  27.     @RequestMapping(value = "/getLogin")
  28.     public Result getLogin(HttpServletRequest request) {
  29.         String token = request.getParameter("token");
  30.         System.out.println("--->>>>" + token);
  31.         if (token == null || token.equals("")) {
  32.             Result result = new Result();
  33.             result.setCode(40000);
  34.             result.setMsg("登陆失败，token失效");
  35.             System.out.println(result);
  36.             return result;
  37.         } else {
  38.             String userEmail = JwtUtils.getClaim(token, "iss");
  39.             User user = userMapper.getUserByEmail(userEmail);
  40.             System.out.println(user);
  41.             if (user == null) {
  42.                 Result result = new Result();
  43.                 result.setCode(50000);
  44.                 result.setMsg("登陆失败，token错误");
  45.                 System.out.println(result);
  46.                 return result;
  47.             } else {
  48.                 loginDto loginDto = new loginDto();
  49.                 loginDto.setName(user.getUserName());//姓名
  50.                 loginDto.setAvatar(user.getAvatar());//头像
  51.                 loginDto.setIntroduction("个性签名");//签名
  52.                 List<String> roles = new ArrayList();
  53.                 roles.add("admin");//角色
  54.                 loginDto.setRoles(roles);
  55.                 return new Result(20000, "登录成功", loginDto);
  56.             }
  57.         }

 JWT方法

java后端代码片段如下：

  1.    //生成token(数据加密又叫做签名sign)
  2.     public static String sign(String userEmail, String password) {
  3.         //创建算法实例
  4.         Algorithm algorithm = Algorithm.HMAC256(password);
  5.         //System.out.println("token生成前……");
  6.         try {
  7.             String token = JWT.create()
  8.                     .withIssuer(userEmail)//设置自定义参数（负载）
  9.                     .sign(algorithm);//头
  10.             //System.out.println("token生成后……");
  11.             System.out.println("token:" + token);
  12.             return token;
  13.         } catch (Exception e) {
  14.             e.printStackTrace();
  15.         }
  16.         return null;
  17.     }
  18.  
  19.     //获取token中负载部分的值
  20.     public static String getClaim(String token, String key) {
  21.         DecodedJWT jwt = JWT.decode(token);
  22.         return jwt.getClaim(key).asString();
  23.     }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/111763
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号