vue解决接口跨域-实现登录-token存取-路由守卫

最新推荐文章于 2024-07-08 16:45:11 发布

杨皂皂

最新推荐文章于 2024-07-08 16:45:11 发布

阅读量1.5k

点赞数 2

分类专栏：笔记文章标签： vue 前端接口

本文链接：https://blog.csdn.net/weixin_46071546/article/details/112954695

版权

本文介绍了在Vue项目中处理接口跨域问题的解决方案，包括创建axios的封装、配置环境变量和vue.config.js设置。同时，详细阐述了登录过程，如何存储和使用token，并通过路由守卫进行权限验证。内容适合前端开发者参考。

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

使用场景

前后端完全分离，接口是后端人员给我的
思路如下：

第一次登录的时候，前端调用接口，返回我们输入框的值
后端验证值，验证成功会发一个token回来
前端收到token将储存起来，我是存在localStorage里
前端每次需要登录验证的请求都需要带着token发送给后端
前端每次跳转页面，都会判断localStorage里是否存在token，无就返回到登录页面
…这里我是看的其他博主的文章，以下是连接

https://blog.csdn.net/weixin_42601136/article/details/108517161

如果跟我一样遇到以上问题，就接着往下看吧
这是我的项目列表在这里插入图片描述

解决以上跨域问题

创建utils文件
request.js就是封装axios

import axios from 'axios'
// import { Notification } from 'element-ui'
// 1. axios 封装 百度到处都有
import {
    getToken } from '../utils/tools' // 获取token
class HttpRequest {
   
  constructor (baseUrl) {
   
    this.baseURL = baseUrl
    this.queue = {
   }
  }
  getInsideConfig () {
   
    const config = {
   
      baseURL: this.baseURL,
      headers: {
   }
    }
    // 若token不为空, 则在headers中加入token
    return config
  }
  interceptors (instance, url) {
   
    instance.interceptors.request.use(config => {
   
      this.queue[url] = true;
    // 这里是给请求headers里面加token验证
      if (getToken('token')) {
   
        config.headers.token = getToken('token')
      }
      return config
    }, error => {
   
      return Promise