【vue实战项目】通用管理系统:封装token操作和网络请求

简介: 【vue实战项目】通用管理系统:封装token操作和网络请求

1.概述

前文我们已经完成了登录页:

【vue实战项目】通用管理系统:登录页-CSDN博客

接下来我们要封装一下对token的操作和网络请求操作。之所以要封装这部分内容是因为token我们登陆后的所有请求都要携带,不可能每次都去重复的去手写:

token=localStorage.getToken('token')
this.axios.post('接口API',参数+token)
          .then(res=>{
            //业务逻辑
          })

这样每次都重复的去手写明显不具有复用性,一旦token的存取逻辑或者API地址变了,到处都要去改。所以将他们抽出来封装是很有必要的。本文的主要内容就是讲解如何去封装token的操作和网络请求。

2.封装对token的操作

对一个应用系统来说,当用户登陆过后,后续的操作都是要进行权限校验的,也就是在请求后端接口的时候都要带上token。所以我们要将token存起来,首先封装一个对token的操作集合。在utils下面新建一个setToken的js:

setToken的内容很简单就是用localStorage来对token进行缓存:

export function setToken(tokenKey,token){
    return localStorage.setItem(tokenKey,token)
}
 
export function getToken(tokenKey){
    return localStorage.getItem(tokenKey)
}
 
export function removeToken(tokenKey){
    return localStorage.removeItem(tokenKey)
}

由于setToken只在登录的时候才需要用到,所以这里没必要将它引入到main.js中去让全局都能调用到,直接在Login组件中引入,在Login组件中能被调用就行了。这里我们换一种方式来引入,import的时候除了用相对路径和绝对路径来导入外,还可以用@来导入,@会自动帮我们定位到资源所在路径


import {setItem} from '@/utils/setToken.js'


Login组件:

<script>
import {usernameAndPassWorldRule} from '../utils/validate.js'
//引入想要的操作token的方法
import {setToken} from '@/utils/setToken.js'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
        username:[{validator:usernameAndPassWorldRule,trigger:'blur'}],
        password:[{validator:usernameAndPassWorldRule,trigger:'blur'}]
      }
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
          this.$router.push('/home')
          this.axios.post('https://rapserver.sunmi.com/app/moc/340/login',this.form)
          .then(res=>{
            console.log(res)
            if(res.data.status===200){
              //使用引入的操作token的方法
              setToken('username',res.data.username)
              this.$message({message:res.data.message,type:'success'})
              this.$router.push('/home')
            }
          })
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>

ok,到了这一步我们已经完成了对token操作的封装,但是这就够了吗?很显然还不够的,至少还有两个地方还需要继续进行封装:

  • 每次网络请求都要调用axios去写一大串地址,一旦地址变了,全局到处都要修改,很明显这里应该继续封装,免得搞得遍地都是。
  • 后续的请求都要携带token,所以很显然还需要封装将token放到请求中去这个动作,免得搞得遍地都是。

这就是接下来我们要继续做的事儿——封装axios操作

3.封装axios

首先我们来解决前面提到的两点中的第一点:


每次网络请求都要调用axios去写一大串地址,一旦地址变了,全局到处都要修改,很明显这里应该继续封装,免得搞得遍地都是。


这个问题可以通过设置代理去解决,在vue.config.js中设置代理写好目标服务的URL前缀,顺便开启一下跨域:

module.exports = {  
    devServer:{
      open:true,
      host:'localhost',
      //配置代理
      proxy:{
        '/api':{
          //目标地址
          target:'http://127.0.0.1:8081/api/',
          //开启跨域
          changeOrigin:true,
          pathRewrite:{
            '^/api':''
          }
        }
      }
    }
  }

接下来解决第二个问题:

后续的请求都要携带token,所以很显然还需要封装将token放到请求中去这个动作,免得搞得遍地都是。

封装一个axios的工具js,service.js:

service.js里面通过拦截器的方式来拦截request和response,在请求发起时放入token,在响应回来时处理报错:

import axios from "axios";
import { getToken } from "@/utils/setToken.js";
import { Message } from "element-ui";
const service= axios.create({
    baseURL:'/api',
    timeout:3000
})
 
//添加请求拦截器
service.interceptors.request.use((config)=>{
    //在请求之前做些什么(获取并设置token)
    config.headers['token']=getToken('token')
    return config
},(error)=>{
    return Promise.reject(error)
})
 
//响应拦截器
service.interceptors.response.use((response)=>{
    //对响应数据做些什么
    let{status,message}=response.data
    if(status!=200){
        //用elementUI的message来提升错误或者告警
        Message({message:message||'error',type:'warning'})
    }
    return response
},(error)=>{
    return Promise.reject(error)
})
 
export default service

service.js是全局都要用到的,所以在main.js里引入:

import Vue from 'vue'
import App from './App.vue'
// import '../plugins/element.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
import 'font-awesome/css/font-awesome.min.css'
// import axios from 'axios'
import router from './router'
 
import service from './utils/service';
 
Vue.use(ElementUI)
//挂载到原型,可以在全局使用
// Vue.prototype.axios=axios
Vue.prototype.service=service;
Vue.config.productionTip = false
 
new Vue({
  //挂在router
  router,
  render: h => h(App),
}).$mount('#app')

最后来改一下Login组件,完整的用上setToken.js和service.js:

<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理系统</span>
      </div>
      <el-form
        label-width="80px"
        :model="form"
        ref="form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
 
<script>
import {usernameAndPassWorldRule} from '../utils/validate.js'
//引入想要的操作token的方法
import {setToken} from '@/utils/setToken.js'
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules:{
        username:[{validator:usernameAndPassWorldRule,trigger:'blur'}],
        password:[{validator:usernameAndPassWorldRule,trigger:'blur'}]
      }
    };
  },
  methods:{
    login(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          console.log(this.form)
          this.service.post('/login',this.form)
          .then(res=>{
            console.log(res.status)
            if(res.status===200){
              setToken('username',res.data.username)
              setToken('token',res.data.token)
              this.$router.push('/home')
 
            }
          })
        }else{
          console.error(this.form)
        }
      })
    }
  }
};
</script>
 
<style lang="less">
.login{
  width: 100%;
  height:100%;
  position: absolute;
  background: #409EFF;
  .box-card{
    width:450px;
    margin: 200px auto;
    .el-card__header{
      font-size: 30px;
    }
    .el-button{
      width: 100%;
    }
 
  }
}
</style>

目录
相关文章
|
28天前
|
Java
【实战演练】JAVA网络编程高手养成记:URL与URLConnection的实战技巧,一学就会!
【6月更文挑战第22天】在Java网络编程中,理解和运用URL与URLConnection是关键。URL代表统一资源定位符,用于标识网络资源;URLConnection则用于建立与URL指定资源的连接。通过构造URL对象并调用openConnection()可创建URLConnection。示例展示了如何发送GET请求读取响应,以及如何设置POST请求以发送数据。GET将参数置于URL,POST将参数置于请求体。练习这些基本操作有助于提升网络编程技能。
|
9天前
|
存储 算法 Python
Python图论实战:从零基础到精通DFS与BFS遍历,轻松玩转复杂网络结构
【7月更文挑战第11天】图论在数据科学中扮演关键角色,用于解决复杂网络问题。Python因其易用性和库支持成为实现图算法的首选。本文通过问答形式介绍DFS和BFS,图是节点和边的数据结构,遍历用于搜索和分析。Python中图可表示为邻接表,DFS用递归遍历,BFS借助队列。DFS适用于深度探索,BFS则用于最短路径。提供的代码示例帮助理解如何在Python中应用这两种遍历算法。开始探索图论,解锁更多技术可能!
23 6
|
20天前
|
Java API 开发者
Java网络编程基础与Socket通信实战
Java网络编程基础与Socket通信实战
|
15天前
|
网络协议 网络架构
【网络编程入门】TCP与UDP通信实战:从零构建服务器与客户端对话(附简易源码,新手友好!)
在了解他们之前我们首先要知道网络模型,它分为两种,一种是OSI,一种是TCP/IP,当然他们的模型图是不同的,如下
|
18天前
|
Java API 开发者
Java网络编程基础与Socket通信实战
Java网络编程基础与Socket通信实战
|
18天前
|
Java API
Java网络编程实战指南与示例代码
Java网络编程实战指南与示例代码
|
21天前
|
SQL 安全 网络安全
网络安全攻防实战:黑客与白帽子的较量
【6月更文挑战第29天】网络安全战场,黑客与白帽子的博弈日益激烈。黑客利用漏洞扫描、DDoS、SQL注入等手段发起攻击,而白帽子则通过防火墙、入侵检测、数据加密等技术防守。双方在技术与智慧的较量中,未来将更多融入AI、区块链等先进技术,提升攻防效率与安全性。面对网络威胁,提升技能与意识至关重要。
|
23天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的网络相册的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的网络相册的详细设计和实现(源码+lw+部署文档+讲解等)
17 1
|
28天前
|
机器学习/深度学习 数据采集 存储
神经网络案例实战
使用PyTorch解决手机价格分类问题:收集包含RAM、存储等特征的手机销售数据,将价格分为4个等级的分类任务。步骤包括数据预处理、特征工程、选择神经网络模型、训练、评估和预测。模型使用Sigmoid激活的三层网络,训练时采用交叉熵损失和SGD优化器。通过调整模型结构、优化器和学习率以优化性能。
|
1月前
|
数据采集 存储 数据挖掘
Python网络爬虫实战:抓取并分析网页数据
使用Python的`requests`和`BeautifulSoup`,本文演示了一个简单的网络爬虫,抓取天气网站数据并进行分析。步骤包括发送HTTP请求获取HTML,解析HTML提取温度和湿度信息,以及计算平均温度。注意事项涉及遵守robots.txt、控制请求频率及处理动态内容。此基础爬虫展示了数据自动收集和初步分析的基础流程。【6月更文挑战第14天】
122 9

热门文章

最新文章