关于登录注册

后端：

router

我在 auth.router.ts 加入了段返回当前用户的路由

/** 
 * 返回当前用户
 */
router.get('/user', currentUser, authController.user)

中间件

用的你添加在 auth.middleware.ts 里

/**
 * 当前用户
 */
export const currentUser = (
  request: Request,
  response: Response,
  next: NextFunction,
) => {
  let user = {
    id: null,
    name: 'anonympus'
  };

  try {
    // 提取 Authorization
    const authorization = request.header('Authorization');

    // 提取 JWT 令牌
    const token = authorization.replace('Bearer ', '');

    if (token) {
      // 验证令牌
      const decoded = jwt.verify(token, PUBLIC_KEY, {
        algorithms: ['RS256'],
      });

      user = decoded as any;
    }
  } catch (error) { }

  // 在请求里添加当前用户
  request.user = user;

  next();
};

控制器

/**
 * 当前用户
 */
export const user = async (
  request: Request,
  response: Response,
  next: NextFunction,
) => {
  const Authorization = request.user;
  const user = Authorization


  try {
    response.send(user)

  } catch (error) {
    next(error)
  }
};

作用就是根据前端的 token 值给前端返回一个用户信息。

前端

app.service.ts. 给 axios 实例加了一句 headers

/**
 * axios 实例
 */

export const apiHttpClient = axios.create({
 baseURL: API_BASE_URL,
 headers: { Authorization: 'Bearer ' + localStorage.getItem('token') },
});

app.vue 里用了一下后端的 /user

script

  data() {
   return {
    user: null,
   };
  },

  async created() {
   const response = await apiHttpClient.get('/user');

   this.user = response.data;
  },

模版

<global-haeder :user="user" />

GlobalHaeder.vue 里有登录菜单

script

 props: ['user'],
  methods: {
   handleClick() {
    localStorage.removeItem('token');
    this.$router.push('/');
   },
  },

模版

    <ul v-if="!user" class="navbar-nav">
     <li class="nav-item px-1 py-1">
      <router-link
       type="button"
       to="/user/login"
       class="btn  btn-outline-primary"
       >登录</router-link
      >
     </li>
     <li class="nav-item px-1 py-1">
      <router-link type="button" to="/user/register" class="btn btn-primary"
       >注册</router-link
      >
     </li>
    </ul>

    <ul v-if="user" class="list-inline mb-0 px-5">
     <li class="nav-item dropdown" :title="user.name">
      <router-link
       class="nav-link dropdown-toggle"
       to="#"
       id="usersDropdown"
       role="button"
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false"
      >
       ![](@/assets/img/avatar.png)
       {{ user.name }}
      </router-link>
      <div class="dropdown-menu" aria-labelledby="usersDropdown">
       <router-link to="/posts/create" class="dropdown-item"
        >发布文章</router-link
       >
       <router-link to="#" class="dropdown-item">个人中心</router-link>
       <router-link to="#" class="dropdown-item">设置账户</router-link>
       <a href="javascript:void(0)" @click="handleClick" class="dropdown-item"
        >退出账户</a
       >
      </div>
     </li>
    </ul>

现在退出用户后，返回的是后端定义的这个

  let user = {
    id: null,
    name: 'anonympus'
  };

测试地址：
http://lejiaoku.lekee.cc 或者 http://lejiaoku.lekee.cc:8080

后端代码：
https://github.com/rockts/lej...

前端代码：
https://github.com/rockts/lej...

那你是想干嘛？

 let user = {
    id: null,
    name: 'anonympus'
  };

改成

 let user = null;

或者判断的时候 user 改成 user && user.id