Laravel Vue js 认证中间件答案

【问题标题】：Laravel Vue js authentication middlewareLaravel Vue js 认证中间件
【发布时间】：2020-11-09 15:43:12
【问题描述】：

我使用 laravel 作为后端和 vue 作为前端 (SPA) 创建 Web 应用程序。但对于身份验证，我不使用jwt auth，而是使用普通的 laravel 身份验证会话。因此，当第一次加载网络时，我放置了一个全局变量来访问用户信息以设置中间件。

全球用户信息。

<script>
    window.App = {
        config: @json($config),
        user: @json($currentUser)
    }
</script>

所以在 vue js 中，我正在为这样的身份验证制作中间件。

Auth.js

export default (to, from, next) => {
  if (!window.App.user) {
    window.location.href = "/login";
  } else {
    next();
  }
};

Guest.js

export default (to, from, next) => {
  if (window.App.user) {
    next({ name: "home" });
  } else {
    next();
  }
};

在组件中我必须这样做。

Vue.prototype.$auth = window.App.user;
<template>

</template>

<script>
export default {
   methods: {
      post() {
        if (this.$auth) {
           // request to server
        }
      }
   }
}
</script>

这样实现认证中间件好不好？客户端可以修改window.App.user吗？客户端可以通过修改window.App.user来访问服务器吗？类似在控制台中的东西

window.App.user = { id: 1, name: "Test" }

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

这样实现认证中间件好不好？

是的，只是改进它：

辅助函数：

export function isAuthenticated() {
   return window.App.user !== null; //or !== undefinded 
}

Auth.js

export default (to, from, next) => {
  //this tested using Vue Router 
   const publicPages = ['/login'];
   const authRequired = !publicPages.includes(to.path);
    
   if (authRequired && !isAuthenticated()) {
     next('/login'); //  or   window.location.href = "/login";
   }else{
     next('home');
   }
}

客户端可以修改window.App.user吗？

是的，客户端的所有内容都是可编辑的

客户端可以通过修改window.App.user来访问服务器吗？

这与你的服务器逻辑（中间件）有关

【讨论】：