npm install express cors body-parser

// server.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

app.use(cors());
app.use(bodyParser.json());

let items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
];

app.get('/api/items', (req, res) => {
  res.json(items);
});

app.post('/api/items', (req, res) => {
  const newItem = req.body;
  items.push(newItem);
  res.status(201).json(newItem);
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

npm install axios

<template>
  <div>
    <h1>Items</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <input v-model="newItem" placeholder="Add new item" />
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      newItem: ''
    };
  },
  methods: {
    async fetchItems() {
      const response = await axios.get('http://localhost:3000/api/items');
      this.items = response.data;
    },
    async addItem() {
      const newItem = { id: Date.now(), name: this.newItem };
      await axios.post('http://localhost:3000/api/items', newItem);
      this.items.push(newItem);
      this.newItem = '';
    }
  },
  mounted() {
    this.fetchItems();
  }
};
</script>

npm install jsonwebtoken

const jwt = require('jsonwebtoken');
const secretKey = 'mySecretKey';

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  if (username === 'admin' && password === 'password') {
    const token = jwt.sign({ username }, secretKey, { expiresIn: '1h' });
    res.json({ token });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});

app.get('/api/protected', (req, res) => {
  const token = req.headers.authorization.split(' ')[1];
  jwt.verify(token, secretKey, (err, decoded) => {
    if (err) {
      res.status(401).json({ message: 'Unauthorized' });
    } else {
      res.json({ message: 'Welcome to protected route!', user: decoded });
    }
  });
});

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: '',
      token: ''
    };
  },
  methods: {
    async login() {
      const response = await axios.post('http://localhost:3000/api/login', {
        username: this.username,
        password: this.password
      });
      this.token = response.data.token;
      axios.defaults.headers.common['Authorization'] = `Bearer ${this.token}`;
    },
    async accessProtectedRoute() {
      const response = await axios.get('http://localhost:3000/api/protected');
      console.log(response.data);
    }
  }
};
</script>

// store/modules/items.js
import axios from 'axios';

export default {
  state: {
    items: []
  },
  mutations: {
    SET_ITEMS(state, items) {
      state.items = items;
    },
    ADD_ITEM(state, item) {
      state.items.push(item);
    }
  },
  actions: {
    async fetchItems({ commit }) {
      const response = await axios.get('http://localhost:3000/api/items');
      commit('SET_ITEMS', response.data);
    },
    async addItem({ commit }, item) {
      await axios.post('http://localhost:3000/api/items', item);
      commit('ADD_ITEM', item);
    }
  },
  getters: {
    allItems: (state) => state.items
  }
};