[JavaScript知识库] Vue3+ElementPlus+Koa2 全栈开发后台系统=＞封装apivuex封装登陆组件完成⑥

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue3+ElementPlus+Koa2 全栈开发后台系统=＞封装apivuex封装登陆组件完成⑥ -> 正文阅读

[JavaScript知识库]Vue3+ElementPlus+Koa2 全栈开发后台系统=＞封装apivuex封装登陆组件完成⑥

1.login页面构建

<template>
  <h1>欢迎来到登陆</h1>
  <el-button type="primary" @click="goHome">返回首页</el-button>
</template>

<script>
import {ref,defineProps,reactive} from 'vue';
import {useRouter} from 'vue-router';

export default {
  name:'Login',
  mounted(){
    // this.$request({
    //   method:'get',
    //   url:'/api/private/v1/user/allUserList',
    //   data:{
    //     name:'czl'
    //   }
    // }).then((res)=>{
    //   console.log(res)
    // })

    this.$request.get('/private/v1/user/allUserList',{name:'czl'},{mock:true,loading:true}).then((res)=>{
      console.log(res)
    })
  },
  setup(){
    const router = useRouter();
    const goHome = ()=>{
      router.push('/welcome')
    }
    return {
      goHome
    }
  }
}


</script>

<style>

</style>

2.封装api.js

/**
 * api管理
 */
import request from './../utils/request'
 
export default {
    login(params) {
        return request({
            url: '/users/login',
            method: 'post',
            data:params
        })
    }
}

3.配置config.js调用mock api

/**
 * 环境配置封装
 */
const env = import.meta.env.MODE || 'prod';
const EnvConfig = {
    dev: {
        baseApi: '/api',
        mockApi:'https://www.fastmock.site/mock/c1c302e8baed9894c48c17e4738c092e/api',
    },
    test: {
        baseApi: '//test.czl.com/api',
        mockApi:'',
    },
    prod: {
        baseApi: '//czl.com/api',
        mockApi:'',
    },
}

export default {
    env,
    namespace:'czlManger',
    mock: true,
    ...EnvConfig[env]
}

4.挂载main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import request from './utils/request';
import storage from './utils/storage';
import api from './api';
import store from './store'

const app = createApp(App);
app.config.globalProperties.$request = request;
app.config.globalProperties.$storage = storage;
app.use(router).use(ElementPlus).mount('#app');
app.config.globalProperties.$api = api;
app.use(router).use(store).use(ElementPlus).mount('#app');

5.重写router.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'

const routes = [
    {
        name: 'home',
        path: '/',
        meta: { title:'首页' },
        component: Home,
        redirect:'/welcome',
        children: [
            {
                name: 'welcome',
                path: '/welcome',
                meta: { title:'欢迎体验Vue3项目' },
                component:() => import('./../views/Welcome.vue')
            },
        ]
    },
    {
        name: 'login',
        path: '/login',
        meta: { title:'登陆' },
        component:() => import('./../views/Login.vue')
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

6.封装vuex,store/index.js

/**
 * Vuex状态管理
 */
import { createStore } from 'vuex'
import mutations from './mutations'
import storage from '../utils/storage'

const state = {
    userInfo : "" || storage.getItem("userInfo") // 获取用户信息
}
export default createStore({
    state,
    mutations
})

7.封装vuex,src/store/mutations.js

/**
 * Mutations业务层数据提交
 */
import storage from "../utils/storage";

export default {
    saveUserInfo(state,userInfo) {
        state.userInfo = userInfo;
        storage.setItem('userInfo',userInfo)
    }
}

8.修改登陆token src/utils/request.js

/**
 * axios二次封装
 */
import axios from 'axios'
import config from '../config'
import { ElMessage }from 'element-plus'
import router from '../router'
import storage from './storage'

const TOKEN_INVALID = 'Token认证失败,请重新登陆!';
const NETWORK_ERROR = '网络请求异常,请稍后重试!';
@@ -21,9 +22,9 @@ const service = axios.create({
 * 请求拦截
 */
service.interceptors.request.use((req) => {
    // TODO
    const headers = req.headers;
    if(!headers.Authorization) headers.Authorization = 'Bear Czl'
    const { token } = storage.getItem('userInfo');
    if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
    return req;
})