253 Attaching the Token to Outgoing Requests

步骤

1、auth/getters.js中添加获取token的getter

 token(state) {
    return state.token;
},

2、coaches/actions.js添加token

import axios from "axios";

export default {
    async registerCoach(context, payload) {
        const userId = context.rootGetters.userId;

        const newCoach = {
            firstName: payload.firstName,
            lastName: payload.lastName,
            description: payload.description,
            hourlyRate: payload.rate,
            areas: payload.areas,
        };

        // const response = await fetch(`http://localhost:5216/api/PutCoach/${userId}`,{
        //     method:'PUT',
        //     body: JSON.stringify(newCoach),
        //     headers: {
        //         'Content-Type': 'application/json',
        //     }
        // });
        const token = context.rootGetters.token;

        axios.defaults.headers.common['Content-Type'] = 'application/json';
        const response = await axios.post(`http://localhost:5216/api/Coaches/PostCoach?auth=${token}`, {
            ...newCoach,
            Id: userId
        }).then((response) => {
            console.log(response);
        }).catch((error) => {
            console.log(error);
        });
        //const responseData = await response.json();

        

        context.commit('registerCoach', {
            ...newCoach,
            id: userId
        });
    },
    async loadCoaches(context, payload) {
        if(!payload.forceRefresh && !context.getters.shouldUpdate){
            return;
        }
        console.log('shouldUpdate');

        const response = await fetch('http://localhost:5216/api/Coaches/GetCoaches');
        const responseData = await response.json();
        console.log(responseData);

        if (!response.ok){
            //error ...
            const error = new Error(responseData.message || 'Failed to fetch!');
            throw error;
        }

        const coaches = [];
        for(const key in responseData){
            const coach = {
                id: responseData[key].id,
                firstName: responseData[key].firstName,
                lastName: responseData[key].lastName,
                description: responseData[key].description,
                hourlyRate: responseData[key].hourlyRate,
                areas: responseData[key].areas
            };
            coaches.push(coach);
        }
        context.commit('setCoaches', coaches);

        context.commit('setFetchTimestamp');
    }
};

3、requests/actions.js添加token

import axios from 'axios';
import { v4 as uuidv4 } from 'uuid';

export default {
    async contactCoach(context, payload) {
        const newRequest = {
            id: uuidv4(),
            coachId: payload.coachId,
            userEmail: payload.email,
            message: payload.message,
        }

        const response = await axios.post('http://localhost:5216/api/Requests/PostRequest', newRequest)
            .then((res) => {
                console.log(res);
            })
            .catch((err) => {
                console.log(err);
            });


        context.commit('addRequest', newRequest);
    },

    async loadRequests(context, payload) {
        const coachId = context.rootGetters.userId;
        const token = context.rootGetters.token;
        const response = await fetch(`http://localhost:5216/api/Requests/GetRequets/${coachId}?auth=${token}`);
        const responseData = await response.json();
        console.log(responseData);

        if (!response.ok){
            //error ...
            const error = new Error(responseData.message || 'Failed to fetch!');
            throw error;
        }

        const requests = [];
        for(const key in responseData){
            const request = {
                id: responseData[key].id,
                userEmail: responseData[key].userEmail,
                message: responseData[key].message,
                coachId: responseData[key].coachId,
            };
            requests.push(request);
        }
        context.commit('setRequests', requests);
    }
}