【vue3】：前端登录功能解决方案

最新推荐文章于 2024-09-11 21:53:03 发布

你听雪飘过的声音

最新推荐文章于 2024-09-11 21:53:03 发布

阅读量457

点赞数

分类专栏：解决方案文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44659458/article/details/125471007

版权

本文详细介绍了在Vue3项目中实现前端登录功能的解决方案，包括配置环境、接口代理、axios封装、localstorage的使用、接口请求模块及登录鉴权的实现，通过Vuex进行状态管理，并利用前置路由进行登录检查。

摘要由CSDN通过智能技术生成

# 后台登录功能解决方案

# 配置生产环境和开发环境

// .env.development
# 标志
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'

// .env.production
# 标志
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

# 配置接口代理

// vue.config.js
module.exports = {
   
  devServer: {
   
    proxy: {
   
      '/api': {
   
        target: '后台地址',
        changeOrigin: true // 是否跨域
      }
    }
  }
}

# 封装 axios 模块

// require.js
import axios from 'axios'
import {
    ElMessage } from 'element-plus'
const service = axios.create({
   
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})
// 请求接口拦截
service.interceptors.request.use(
  config => {
   
    // 统一添加请求参数
    config.headers.code = '参数值'
    return config
  }
)
// 响应拦截器
service.interceptors.response.use(
  response => {
   
    const {
    success, message, data } = response.data
    if (success) {
    // 请求成功
      return data
    } else {
   
      ElMessage.error(message