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

使用场景

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

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

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

这是我的项目列表

解决以上跨域问题

1. 创建utils文件
2. 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.reject(error)
    })
    instance.interceptors.response.use(res => { 
      delete this.queue[url]
      const { data, status, headers } = res
      const { result } = data
      //  这里处理数据 将res 中的所需要的东西 解构（解构赋值）出来，再return出来
      return { data, status, headers, result }
    }, error => {
    // 这里对请求错误状态进行提示
    //   if (error.response.status !== 200) {
    //     Notification({
    //       type: 'error',
    //       message: error.response.data.message
    //     })
    //   }
      delete this.queue[url]
      return Promise.reject(error.response)
    })
  }
  request (options) {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest //导出

3.配置环境变量，就是api文件夹里的index.js

import HttpRequest from '../utils/request'  //引用utils文件下的request.js文件
const baseUrl = process.env.VUE_APP_BASE_URL  //环境变量

// .env                # 在所有的环境中被载入
// .env.local          # 在所有的环境中被载入，但会被 git 忽略
// .env.[mode]         # 只在指定的模式中被载入
// .env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略
const axios = new HttpRequest(baseUrl)//然后new一个HttpRequest然后把刚刚baseUrl带进去
export default axios  //导出axios

4.然后在vue.config.js里（此处编辑的时候忘记了）
如果没有vue.config.js，就自己创一个就好了

module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: "http://",  // 此处为接口地址
          changeOrigin: true,   // 是否允许跨域
        }
      }
    }
  }

5.再编写登录接口，就是api文件下的login.js

import axios from './index'

// 这里封装接口，好管理
export function login(data){
    return axios.request({
        url: '/user/login',//接口路径
        method: 'POST',//请求方法
        headers: {
            'Content-Type': 'application/json' // 因为这个接口必须传JSON格式，所以加一个headers格式
        },
        transformRequest: [function(data) { // 将传过来的参数 进行JSON转换
            data = JSON.stringify(data)
            return data
        }],
        data
      })
}

实现登录

6.在login.vue引用登录接口文件


看后台状态是否为200，200就成功了，500就是后端的错，404就是没找到。

token存取

1. 在utils文件夹里创建tools.js文件

// 获取token
const getToken = TokenKey => {
    return localStorage.getItem(TokenKey)
}
// 设置token
const setToken = (TokenKey, token) => {
    localStorage.setItem(TokenKey, token)
}
export { getToken, setToken } //导出

2.再login.vue里引用tools.js文件，再把获取的token值存进去(看上面的截图)

路由守卫

引用tools.js,在获取token并判断

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import register from '../views/register.vue'
import login from '../views/login.vue'
//引用tools
import {getToken, setToken} from '../utils/tools'
   
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },{
    path:"/register",
    name:"register",
    component:register,
  },{
    path:"/login",
    name:"/login",
    component:login
  }
]

const router = new VueRouter({
  mode: 'history',
  // @ts-ignore
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
  //对于登录页面不拦截
  if (to.path === '/login' || to.path === '/') {
    // 接下来
    next();
  } else {
    alert("请先登录");
    //获取token值
    let TokenKey = getToken('TokenKey');
    //验证token存不存在，不存在就去登陆页
    if (TokenKey === null || TokenKey === '') {
      next('/login');
    } else {
      next();
    }
  }
});

export default router

欢迎大家评论，我是小白，第一次写项目，还有很多不足的地方，请各位大神多多指教，谢谢大家观看！嘴下留情。