帮我写一个vue，前后端分离 ，带有可以查看当前用户信息的导航栏，全部代码

好的，以下是一个基于Vue和前后端分离的示例代码，其中包含了一个导航栏和可以查看当前用户信息的功能：

<template>
  <div>
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li v-show="isLoggedIn"><router-link to="/profile">{{ currentUser.username }}</router-link></li>
        <li v-show="!isLoggedIn"><router-link to="/login">Login</router-link></li>
        <li v-show="isLoggedIn"><a href="#" @click="logout">Logout</a></li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentUser: {},
      isLoggedIn: false,
    };
  },
  created() {
    const token = localStorage.getItem('token');
    if (token) {
      axios.defaults.headers.common.Authorization = `Bearer ${token}`;
      axios.get('/api/users/me')
        .then((response) => {
          this.currentUser = response.data;
          this.isLoggedIn = true;
        })
        .catch((error) => {
          console.error(error);
          this.logout();
        });
    }
  },
  methods: {
    logout() {
      axios.post('/api/auth/logout')
        .then(() => {
          localStorage.removeItem('token');
          axios.defaults.headers.common.Authorization = '';
          this.currentUser = {};
          this.isLoggedIn = false;
          this.$router.push('/');
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

这个示例代码包含了一个导航栏，其中包括了一个可以查看当前用户信息的链接。当用户登录时，该链接会显示当前用户的用户名，并且可以通过点击该链接跳转到用户的个人资料页面。当用户未登录时，该链接将被隐藏，并显示登录链接。

在Vue组件的created()方法中，我们使用axios库向后端应用程序发送请求，检查用户是否已登录，并获取当前用户的信息。如果用户已登录，则将当前用户信息存储在Vue组件的data属性中，并将isLoggedIn属性设置为true。如果用户尚未登录，则将isLoggedIn属性设置为false。

在导航栏中，我们使用Vue的v-show指令来控制登录和注销链接的显示。当用户已登录时，注销链接将显示，并在点击时调用logout()方法注销用户。在logout()方法中，我们向后端应用程序发送POST请求，以注销当前用户，并将token从localStorage中删除。

这是一个基本的示例，你可以根据自己的实际需求进行修改和扩展。需要注意的是，这个示例仅包含了前端部分代码，后端代码需要你自己实现。