后台登录方案（包含环境配置、请求封装、登录鉴权）

最新推荐文章于 2024-06-10 22:18:41 发布
最新推荐文章于 2024-06-10 22:18:41 发布
阅读量1.2k 收藏 30
点赞数 44
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68110835/article/details/135014731
版权

登录方案分析：

  1. 封装 axios 模块 （环境变量配置）

  2. 封装 接口请求 模块

  3. 封装登录请求动作

  4. 保存服务端返回的 token

  5. 登录鉴权 （白名单、判断token、退出登录方案）

封装 axios 模块

1. 创建axios实例：定义请求baseURL、请求超时时间

2.请求、响应拦截

import store from '@/store'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { isCheckTimeout } from '@/utils/auth'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 6000
})

// 请求拦截
service.interceptors.request.use(
  (config) => {
    if (store.getters.token) {
      // 判断前端定时的token是否超时
       if (!isCheckTimeout) {
        store.dispatch('user/logout')
        return Promise.reject(new Error('token 失效'))
      }
       存在token 注入请求头
       config.headers.Authorization = `Bearer ${store.getters.token}`
    }
    // 配置接口国际化
    config.headers['Accept-Language'] = store.getters.language
    return config
  },
  (error) => {
    // 判断服务器的token是否超时,超时返回code=401
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 401
    ) {
      store.dispatch('user/logout')
    }
    ElMessage.error(error.message) // 提示错误信息
    return Promise.reject(error)
  }
)

// 响应拦截
service.interceptors.response.use(
  (response) => {
    const { success, message, data } = response.data
    if (success) {
      return data
    } else {
      ElMessage.error(message)
      return Promise.reject(new Error(message))
    }
  },
  (error) => {
    ElMessage.error(error.message)
    return Promise.reject(error)
  }
)

export default service

baseURL 获取的环境变量

创建两个变量 .env.development 、.env.production 

ENV = 'production'
VUE_APP_BASE_API = '/prod-api'

================================

ENV = 'development'
VUE_APP_BASE_API = '/api'

axios模块中获取环境变量 

process.env.VUE_APP_BASE_API

封装请求动作

创建 api 文件夹，创建 sys.js：

import request from '@/utils/request'

/**
 * 登录
 */
export const login = data => {
  return request({
    url: '/sys/login',
    method: 'POST',
    data
  })
}

封装登录请求动作：

该动作我们期望把它封装到 vuex 的 action 中

在 store 下创建 modules 文件夹，创建 user.js 模块，用于处理所有和 用户相关 的内容（此处需要使用第三方包 md5 ）

import { login } from '@/api/sys'
import md5 from 'md5'
export default {
  namespaced: true,
  state: () => ({}),
  mutations: {},
  actions: {
    login(context, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: md5(password)
        })
          .then(data => {
            resolve()
          })
          .catch(err => {
            reject(err)
          })
      })
    }
  }
}

在 store/index 中完成注册

import { createStore } from 'vuex'
import user from './modules/user.js'
export default createStore({
  modules: {
    user
  }
})

登录触发动作

在 login 中，触发定义的 action

<template>
	<el-button
        type="primary"
        style="width: 100%; margin-bottom: 30px"
        :loading="loading"
        @click="handleLogin"
        >登录</el-button
      >
</template>
<script setup>
import { ref } from 'vue'
import { validatePassword } from './rules'
import { useStore } from 'vuex'
...

// 登录动作处理
const loading = ref(false)
const loginFromRef = ref(null)
const store = useStore()
const handleLogin = () => {
  loginFromRef.value.validate(valid => {
    if (!valid) return

    loading.value = true
    store
      .dispatch('user/login', loginForm.value)
      .then(() => {
        loading.value = false
        // TODO: 登录后操作
      })
      .catch(err => {
        console.log(err)
        loading.value = false
      })
  })
}
</script>

前面配置环境变量时指定了 开发环境下，请求的 BaseUrl 为 /api ，所以我们真实发出的请求为：/api/sys/login 。

这样的一个请求会被自动键入到当前前端所在的服务中，所以我们最终就得到了 http://192.168.18.42:8081/api/sys/login 这样的一个请求路径。

而想要处理这个问题，那么可以通过指定 webpack DevServer 代理 的形式，代理当前的 url 请求。

而指定这个代理非常简单，是一种近乎固定的配置方案。

在 vue.config.js 中，加入以下代码：

module.exports = {
  devServer: {
    // 配置反向代理
    proxy: {
      // 当地址中有/api的时候会触发代理机制
      '/api': {
        // 要代理的服务器地址  这里不用写 api
        target: 'https://api.imooc-admin.lgdsunday.club/',
        changeOrigin: true // 是否跨域
      }
    }
  },
  ...
}

保存服务端返回的 token

1. 在 vuex 的 user 模块下，处理 token 的保存

import { login } from '@/api/sys'
import md5 from 'md5'
import { setItem, getItem } from '@/utils/storage'
import { TOKEN } from '@/constant'
export default {
  namespaced: true,
  state: () => ({
    token: getItem(TOKEN) || ''
  }),
  mutations: {
    setToken(state, token) {
      state.token = token
      setItem(TOKEN, token)
    }
  },
  actions: {
    login(context, userInfo) {
      ...
          .then(data => {
            // 后续响应拦截配置返回数据简化操作后
            this.commit('user/setToken', data.token)
            resolve()
          })
          ...
      })
    }
  }
}

2. 响应数据统一处理 （获取token数据简化操作，请求、响应拦截器配置）

在 utils/request.js 中实现以下代码

import axios from 'axios'
import { ElMessage } from 'element-plus'

...
// 响应拦截器
service.interceptors.response.use(
  response => {
    const { success, message, data } = response.data
    //   要根据success的成功与否决定下面的操作
    if (success) {
      return data
    } else {
      // 业务错误
      ElMessage.error(message) // 提示错误消息
      return Promise.reject(new Error(message))
    }
  },
  error => {
    // TODO: 将来处理 token 超时问题
    ElMessage.error(error.message) // 提示错误信息
    return Promise.reject(error)
  }
)

export default service

登录鉴权

 在 main.js 平级，创建 permission 文件

import router from './router'
import store from './store'

// 白名单
const whiteList = ['/login']
/**
 * 路由前置守卫
 */
router.beforeEach(async (to, from, next) => {
  // 存在 token ，进入主页
  // if (store.state.user.token) {
  // 快捷访问
  if (store.getters.token) {
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else {
    // 没有token的情况下，可以进入白名单
    if (whiteList.indexOf(to.path) > -1) {
      next()
    } else {
      next('/login')
    }
  }
})

在此处我们使用到了 vuex 中的 getters ，此时的 getters 被当作 快捷访问 的形式进行访问

所以我们需要声明对应的模块，创建 store/getters

const getters = {
  token: state => state.user.token
}
export default getters

 在 store/index 中进行导入：

import getters from './getters'
export default createStore({
  getters,
  ...
})

退出登录方案 

  1. 用户主动退出

    点击退出，清空token

  2. 用户被动退出

token 过期或被 其他人”顶下来“ 时退出

        1. 主动方案
        2. 被动方案

核心：

  1. 清理掉当前用户缓存数据
  2. 清理掉权限相关配置
  3. 返回到登录页

被动退出的主动方案之前端主动介入 token 时效的处理

  1. 在用户登陆时，记录当前 登录时间
  2. 制定一个 失效时长
  3. 在接口调用时，根据 当前时间 对比 登录时间 ，看是否超过了 时效时长
    1. 如果未超过，则正常进行后续操作
    2. 如果超过，则进行 退出登录 操作

创建 utils/auth.js 文件，并写入以下代码

import { TIME_STAMP, TOKEN_TIMEOUT_VALUE } from '@/constant'
import { setItem, getItem } from '@/utils/storage'
/**
 * 获取时间戳
 */
export function getTimeStamp() {
  return getItem(TIME_STAMP)
}
/**
 * 设置时间戳
 */
export function setTimeStamp() {
  setItem(TIME_STAMP, Date.now())
}
/**
 * 是否超时
 */
export function isCheckTimeout() {
  // 当前时间戳
  var currentTime = Date.now()
  // 缓存时间戳
  var timeStamp = getTimeStamp()
  return currentTime - timeStamp > TOKEN_TIMEOUT_VALUE
}

在 constant 中声明对应常量  

// token 时间戳
export const TIME_STAMP = 'timeStamp'
// 超时时长(毫秒) 两小时
export const TOKEN_TIMEOUT_VALUE = 2 * 3600 * 1000

在用户登录成功之后去设置时间，到 store/user.js 的 login 中

import { setTimeStamp } from '@/utils/auth'

login(context, userInfo) {
      ...
      return new Promise((resolve, reject) => {
        ...
          .then(data => {
            ...
            // 保存登录时间
            setTimeStamp()
            resolve()
          })
      })
    },

在 utils/request 对应的请求拦截器中进行 主动介入

import { isCheckTimeout } from '@/utils/auth'

if (store.getters.token) {
      if (isCheckTimeout()) {
        // 登出操作
        store.dispatch('user/logout')
        return Promise.reject(new Error('token 失效'))
      }
      ...
    }

用户被动退出解决方案之被动处理

  1. token 过期
    服务器返回的token过期
  2. 单用户登录
    服务器返回状态
核心：在请求时，服务器返回的状态码辨认

在 utils/request 的响应拦截器中，增加以下逻辑

// 响应拦截器
service.interceptors.response.use(
  response => {
    ...
  },
  error => {
    // 处理 token 超时问题
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 401
    ) {
      // token超时
      store.dispatch('user/logout')
    }
    ElMessage.error(error.message) // 提示错误信息
    return Promise.reject(error)
  }
)

HuanyouRong
关注
  • 44
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Security在Spring Boot配置自定义登录接口
qq_43887341的博客
06-21 1153
Security在Spring Boot配置自定义登录接口
前后端常见的几种鉴权方式
热门推荐
wang839305939的博客
01-03 11万+
常见的授权四种授权方式HTTP Basic Authentication，session-cookie,token(jwt)，OAuth(开放授权)
登录鉴权方案
sdgames的博客
06-07 733
我们在开发中需要用到对接口的登录鉴权,首先后台会根据几个参数组成字符串+secretKey，用AES(ECB)加密算法来生成秘钥ticket,第三方访问的时候，带在提供的系统认证地址后面（列如http(s)://test.com?ticket=秘钥）参数：这些参数包括时间戳，姓名，手机号，8位随机数，这些都是基本的，有的还需要根据实际业务场景添加一些信息，比如人员所在地，所在行政区划，年龄，职位信息等等。字符串参数生成规则：timeStamp=时间戳&mobile=89757&userName=柳如是&ra
Spring Security 3 与 CAS单点登录配置-Client
工作杂记
08-09 244
如果CAS配置完成。就可以进行Client的配置了。 以下Client的配置前提是你对Spring Security有一定了解。如果不熟悉，还是希望能先读一下Spring Security相关的文章。 下面是Client的Spring Security 3的最基础的配置 1.配置标签 [code="xml"] [/code] ...
APP后台 无密码登录 Security 认证流程思路
AKALXH的博客
07-27 3091
APP后台 无密码登录 Security 认证流程思路 后台使用spring security，但是app端显然不能使用像web端登录那样的处理方式，所以如何"骗过"spring security"，下面介绍app接入短信登录与一键登录后的 security认证流程。 基本流程（伪代码展示） : //短信登录 public Object SMSLogin(忽略信息参数){ // 构建一个由账号密码组成的认证对象,在这个构造器内部会将对应的信息赋值给各自的本地变量，并且会调用父类Abstrac.
axios 常用配置以及请求方法封装
10-13
使用 axios 的基本配置（axios.create()、baseURL、拦截器）和 post、get、download、upload 等方法的封装。
vue移动端微信授权登录插件封装的实例
10-18
今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...
Flutter dio网络请求封装、实体类封装
11-20
闲着无聊，自己搭建的一个快速开发框架，目前已经二次封装了 dio网络请求以及封装了ResultListBo、ResultObjBo返回基类，有通用的success、errorCode、msg字段，然后定义了两种类型的数据返回格式，一种是直接body...
nodejs实现的http、https 请求封装操作示例
10-15
主要介绍了nodejs实现的http、https 请求封装操作,结合实例形式分析了node.js针对http、https 请求的封装与使用相关操作技巧,需要的朋友可以参考下
spring boot+spring security实现后台登录端口
weixin_44653261的博客
07-06 882
1、使用mybatis逆向工具生成model、mapper包。 打开xml文件设置好需要连接的数据库，生成的包。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN" "http://mybatis.org/dtd/mybatis-generator-c
【场景方案】适用于简单后台管理的登陆退出鉴权解决方案（vue）
庞囧的博客
05-24 659
文章内容是我的crm解决方案里实现的原理的解析crm解决方案。有些代码示例中看不到引入，因为我这里只记录实现的思路，具体的可以看我项目源码。
【API接口设计】之token、timestamp、sign详解
weixin_44765236的博客
10-25 521
Token：访问令牌access token, 用于接口中, 用于标识接口调用者的身份、凭证，减少用户名和密码的传输次数。一般情况下客户端(接口调用方)需要先向服务器端申请一个接口调用的账号，服务器会给出一个appId和一个key, key用于参数签名使用，注意key保存到客户端，需要做一些安全处理，防止泄露。
axios登录，登出接口的简单封装步骤详解！
TangMonk的博客
10-07 670
点击事件如下//将登陆用户名赋给store管理实现共享//调用axios对象的get发送请求} else {!");});},LogOut() {// 删除所有本地缓存包括令牌信息// 删除所有本地缓存包括令牌信息// 跳转到登录页面});},
vue中Axios的封装和API接口的管理（更新）
weixin_33721344的博客
08-07 9918
如图，面对一团糟代码的你~~~真的想说，What F~U~C~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请...
Vue2+axios封装，实现用户token登录管理
qq_45292334的博客
05-27 2473
Vue2+axios 封装，实现用户token登录管理 一个小项目，用户登录生成token，并放在请求头中带给后台做验证，token到期或者错误时将用户踢下线 1.新建一个文件m_api.js，放入api文件夹中，我项目的src目录如图所示，可用做参照 2. 引入axios，并创建axios实例,代码如下:` // let Base64 = require('js-base64').Base64; import axios from 'axios'; //import Router from 'router
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 407
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 572
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1444
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3.0 axios封装请求微服务后台
04-05
下面是一个基于Vue3和Axios的微服务请求封装示例： 1. 安装Axios ``` npm install axios ``` 2. 创建axios实例 ```js import axios from 'axios' const service = axios.create({ baseURL: process.env.VUE_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值