跟着JHipster学做项目 (6) 安全访问控制（下）JWT的Vue前端应用

关注

原创最新推荐文章于 2026-02-16 13:54:20 发布 559 阅读 AI 写同款· GEO 优化 ›

python机器人编程——用pytorch实现六轴机械臂的正向和逆向数值解算，及python算法解析前面对六轴（或多轴）机械臂进行了一些研究，特别是利用几何进行简化，实现逆解，来完成比较简单的搬用任务。然而，如果需要比较精确的操作任务，可能需要更加复杂的机械臂解算。其中比较复杂的是数值解算，这种解算往往涉及到比较复杂的机器人运动等原理知识，比较难以上手。但是，python的生态挺全面，已经有很多牛人实现了数值解法，但是去看他们的代码，还是觉得费劲。此外，随着深度神经网络的兴起，很多是用建立深度学习神经网络，去利用机械臂输入输出的大数据，训练机械臂的控制模型，这个上手也比较慢。阅读详情

JHipster前端对JWT处理主要包括两个方面：

请求后端授权后对token进行解析。
从localStorage或者sessionStorage中获取token并放入请求报文。

JHipster没有采用Spring Boot默认的formData以及/login, 而是json报文，/authenticate，代码如下：

  public doLogin(): void {
    const data = { username: this.login, password: this.password, rememberMe: this.rememberMe };
    axios
      .post('api/authenticate', data)
      .then(result => {
        const bearerToken = result.headers.authorization;
        if (bearerToken && bearerToken.slice(0, 7) === 'Bearer ') {
          const jwt = bearerToken.slice(7, bearerToken.length);
          if (this.rememberMe) {
            localStorage.setItem('jhi-authenticationToken', jwt);
          } else {
            sessionStorage.setItem('jhi-authenticationToken', jwt);
          }
        }
        this.authenticationError = false;
        this.$root.$emit('bv::hide::modal', 'login-page');
        this.accountService().retrieveAccount();
      })
      .catch(() => {
        this.authenticationError = true;
      });
  }

授权成功后，利用axios拦截器功能在每一个报文请求header中添加token

const onRequestSuccess = config => {
  const token = localStorage.getItem('jhi-authenticationToken') || sessionStorage.getItem('jhi-authenticationToken');
  if (token) {
    if (!config.headers) {
      config.headers = {};
    }
    config.headers.Authorization = `Bearer ${token}`;
  }
  config.timeout = TIMEOUT;
  config.url = `${SERVER_API_URL}${config.url}`;
  return config;
};

这里this.accountService().retrieveAccount()发出的请求中已经带有token,在成功返回登录用户信息后，前端标记授权成功，并在localStorage中保存账号信息。

public retrieveAccount(): void {
    this.store.commit('authenticate');
    axios
      .get('api/account')
      .then(response => {
        const account = response.data;
        if (account) {
          this.store.commit('authenticated', account);
          if (this.store.getters.currentLanguage !== account.langKey) {
            this.store.commit('currentLanguage', account.langKey);
          }
          if (sessionStorage.getItem('requested-url')) {
            this.router.replace(sessionStorage.getItem('requested-url'));
            sessionStorage.removeItem('requested-url');
          }
        } else {
          this.store.commit('logout');
          this.router.push('/');
          sessionStorage.removeItem('requested-url');
        }
        this.translationService.refreshTranslation(this.store.getters.currentLanguage);
      })
      .catch(() => {
        this.store.commit('logout');
        this.router.push('/');
      });

最后是系统登出后对localStorage和sessionStorage进行清理。

  public logout(): void {
    localStorage.removeItem('jhi-authenticationToken');
    sessionStorage.removeItem('jhi-authenticationToken');
    this.$store.commit('logout');
    this.$router.push('/');
  }

Good Luck,

Cheers!

收录于