Laravel Vue js身份验证中间件

Question

我创建的web应用程序以laravel作为后端，以vue作为前端(SPA(。但对于身份验证，我不使用CCD_ 1，而是使用正常的laravel-auth会话。所以当web第一次加载时，我放置了一个全局变量来访问用户信息，以便设置中间件。

全局用户信息。

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

所以在vue js中，我为auth制作了这样的中间件。

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" }

Answer 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');
}
}

可以修改客户端窗口。应用程序用户？

是的，客户端的每个东西都是可编辑的

客户端只需修改窗口即可访问服务器。应用程序用户？

这与您的服务器逻辑(中间件(有关