Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【谷粒学院】016-前后端:实现登录功能

【谷粒学院】016-前后端:实现登录功能

作者头像
訾博ZiBo
发布于 2025-01-06 08:56:03
发布于 2025-01-06 08:56:03
16900
代码可运行
举报
运行总次数:0
代码可运行

一、登录逻辑简单梳理

1、前言

由于自己的年少情况,遇到了很多阻碍,甚至中途泄气,虽然通过自己研究了解到很多知识吧,但项目的进度真实严重滞后了,还好最终找到了通路,总结出的教训:学习最好按照老师教的一步一步来,不要好高骛远、自以为是,要尽量使用老师使用的框架版本,加油!

2、原始登录逻辑

原始登录是由这个前端框架自己模拟的,官方提供的流程说明是:

  1. UI 组件交互操作;
  2. 调用统一管理的 api service 请求函数;
  3. 使用封装的 request.js 发送请求;
  4. 获取服务端返回;
  5. 更新 data;

其中第4步,在此项目中是使用mock模拟的数据,所以说,我们要做的是改变请求地址,之前从mock拿数据,现在从我们的后端项目拿数据;

二、登录功能实现

1、修改请求地址

vue-element-admin这个框架将请求统一封装在了 request.js 里面,我们只需要修改baseURL即可;

request.js:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  // 我们只需要这个修改baseURL即可修改全局的请求地址
  baseURL: 'http://localhost:8001',
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

2、登录请求实现

说明:

当我们点击登录按钮的时候会向后台发送两个请求,一个是/edu-admin/user/login,另一个是/edu-admin/user/info,所以我们需要在后台实现这两个接口;

代码实现LoginController:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
package com.zibo.edu.controller;

import com.zibo.common.utils.R;
import org.springframework.web.bind.annotation.*;

@CrossOrigin //跨域
@RestController
@RequestMapping("/edu-admin/user")
public class LoginController {

    @PostMapping("/login")
    public R login(){
        return R.ok().data("token","admin");
    }
    @GetMapping("/info")
    public R info(){
        return R.ok().data("roles","[admin]").data("name","admin").data("avatar","https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif");
    }
    @PostMapping("/logout")
    public R logout(){
        return R.ok().success(true);
    }
}

3、关于跨域问题

为什么会出现跨域问题:

通过一个地址去访问另一个地址,这个过程中三个地方有任何一个地方不一样就会出现跨域问题,三个地方:访问协议,ip地址,端口号;

如何解决跨域问题:

在后台相关controller上面添加@CrossOrigin注解即可;

4、测试

请求地址修改成功了,跨域问题也解决了

5、为什么两个login?

OPTIONS请求:只是为了测试服务器是否可以连通,不会真正进行请求,更不会返回数据;

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-01-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
猿实战01——vue后台前端框架搭建
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是问题。更多精彩内容,敬请大家关注公主号猿人工厂,点击猿人养成获取!
山旮旯的胖子
2020/08/21
7311
猿实战01——vue后台前端框架搭建
猿实战01——vue后台前端框架搭建
猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,跟着教程走下来,变身猿人找到工作不是问题。
山旮旯的胖子
2020/08/18
7150
猿实战01——vue后台前端框架搭建
axios的前端封装
在vue项目中,大家一般都会频繁的使用axios发起请求。 那我们索性把axios封装成一个我们自己的工具类, 使用起来就会很方便 新建js文件 名为request.js 第一步 导入依赖 import axios from 'axios' import { Message, MessageBox } from 'element-ui' import store from '../store' import { getToken } from '@/utils/auth' 第二步 创建axios实例 /
Tom2Code
2022/11/21
5730
初识ABP vNext(4):vue用户登录&菜单权限
几乎所有的系统都绕不开登录功能,那么就从登录开始,完成用户登录以及用户菜单权限控制。
xhznl
2020/08/20
2.3K0
初识ABP vNext(4):vue用户登录&菜单权限
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装
使用 vue 开发时,频繁使用到了 axios 这个网络请求库,这里对其做一个发起请求时携带参数方式的小结。
HelloWorldZ
2024/03/20
2760
【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装
​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之用户登录(二)
通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之环境搭建(一)的介绍,我们已经搭建好本地开发环境并且运行成功了,今天主要介绍登录功能。
crudapi
2021/08/27
1.2K0
​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之用户登录(二)
2019-08-16 vue的axios的拦截器,响应器(api的集中处理。统一处理入参和出参)
CHUANGJA.png Q.png axios的baseURL的理解 当url设置的详细的时候,那么baseURL无效 当url设置为 /list ,那么实际的url 是: baseURL+ "/list" 注意不能有空格。 ---- 下面为全部代码 axios.js import axios from 'axios' import { Message,MessageBox} from 'element-ui' let servie = axios.create({ baseURL: "基础
用户4344670
2019/08/28
1.6K0
2019-08-16 vue的axios的拦截器,响应器(api的集中处理。统一处理入参和出参)
vue前端实战注意事项
1. vue前端实战注意事项 1.1. 预备 1.1.1. Eslint 这是个语法检查工具,我用webstorm作为开发的ide,这个语法检查还是太严格了,一个空格啥的都会报错,对新手来讲还是建议关
老梁
2019/09/10
8470
vue前端实战注意事项
学习 Vue 3 全家桶 - Vue 项目规范和基础封装
像 axios、 NProgress、xlsx、clipboard 等相对独立的工具来说,引入的难度非常低。
Cellinlab
2023/05/17
3230
接口自动化平台前端(3)-登陆优化
在后端登陆接口已经写好的情况下,前端就可以做登陆这块的处理,如果登陆成功就将后端返回的token拿到并且塞到请求头中,如果接口返回token失效的信息,则提示用户token失效,并跳转登陆页面。我们可以通过修改axios 请求拦截器来实现这些场景
流年Felix
2023/05/28
2940
Vue + Flask 实战开发系列(七)
vue-admin-template这套脚手架程序,是整合了Vue全家桶相关技术。对于Vue零基础的读者,如果在此基础上来做开发,可能会有一定的难度。因此,你至少需要了解学习一下axios,vuex,vue-router等相关的内容。
TalkPython
2020/07/13
3.4K1
搭建后台管理系统的思路
搭建后台管理系统最基础的是什么呢?个人的体会是整体的基础框架,这个是指最基础的框架,比如根 router-view, 侧边栏以及侧边栏的router-view,以及顶部栏,等基础布局的控制。
公众号---人生代码
2021/05/08
3K0
[golang] 实现 jwt 方式登录
原理是生存的凭证包含标题 header,有效负载 payload 和签名组成。用户信息payload中,后端接收时只验证凭证是否有效,有效就使用凭证中的用户信息。
逝兮诚
2023/02/26
1.2K0
[golang] 实现 jwt 方式登录
解决post方法使用application/x-www-form-urlencoded格式编码数据
文档: https://www.kancloud.cn/yunye/axios/234845 官网: https://www.axios.com/ gitHub: https://github.com/axios/axios
唯一Chat
2022/11/16
4.1K0
微服务项目:尚融宝(29)(后端搭建:实现用户登录(2))
service-core 中 UserInfoController添加令牌校验接口
一个风轻云淡
2022/11/15
4260
微服务项目:尚融宝(29)(后端搭建:实现用户登录(2))
2.封装axios、本地存储,安装vuex、element
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
RtyXmd
2018/08/30
1.4K0
2.封装axios、本地存储,安装vuex、element
axios的封装与请求
引入下axios,然后对axios做下基本的封装。然后就是mock数据的方式说一下,以及在项目中使用的mock方式。 1、安装 axios是什么就不说了吧,你应该已经很熟了,就直接安装吧。 $ npm install axios --save 2、axios封装 然后我们简单的在src/utils/request.js中简单的进行了一下axios封装。 import axios from 'axios' import { Toast, Dialog } from 'vant' // 创建一个axi
Ewall
2020/04/09
1.1K0
Vue3中使用axios
axios是一个基于Promise的HTTP请求库,它可以在浏览器和Node.js中使用。axios的功能非常请打,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。
九仞山
2023/10/14
2K0
Vue3中使用axios
Todo List: 多人协同处理待办事项,权限管理 – 第七章(第1节)
Todo List项目到这里已经到了非常重要的部分,涉及到用户部分。权限,多人协同操作等,都是非常重要,且复杂的地方,所以这里分为几个章节,一步一步的完成。
Javanx
2019/09/04
1.5K0
Todo List: 多人协同处理待办事项,权限管理 – 第七章(第1节)
题小侠
很早就了解与学习过微信小程序开发相关的技术栈与框架,小程序的账号也都已经申请过。但写过的 demo 项目也迟迟没有发布到小程序上。这主要的原因还是觉得不值得发布,加上各种审核相关的。而这次准备写一个搜题相关的小程序,也是时候实战发布一下,顺带记录下整个开发与发布过程。
愧怍
2023/10/21
5060
题小侠
推荐阅读
相关推荐
猿实战01——vue后台前端框架搭建
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验