如果用户在 Laravel 中通过身份验证，如何签入 Vue 组件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51329297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check in a Vue component if a user is authenticated in Laravel?
提问by Jquestions
As the title states, I'm a little confused how I would tackle a method in my Vue Component with if/else statement based on if the user is logged in and authenticated with Laravel's Auth facade. I'm making various Axios requests which I need to allow/disallow based on if user logged in.
正如标题所述，我有点困惑如何根据用户是否登录并使用 Laravel 的 Auth 外观通过 if/else 语句处理我的 Vue 组件中的方法。我正在发出各种 Axios 请求，我需要根据用户是否登录来允许/禁止这些请求。
I have VUEX setup and was thinking that I can use local storage somehow to have a state for isLoggedinfor example that works with Laravel. But I don't know if this is correct method, or secure and presumably Laravel is already storing it's authentication. So can I just access that direct in Vue?
我有 VUEX 设置，并认为我可以以某种方式使用本地存储来获得isLoggedin的状态，例如与 Laravel 一起使用。但我不知道这是否是正确的方法，或者安全并且大概 Laravel 已经存储了它的身份验证。那么我可以直接在 Vue 中访问它吗？
Some unclean solutions here that I don't think are the best - https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and-vuejs
这里有一些我认为不是最好的不干净的解决方案 - https://laracasts.com/discuss/channels/vue/hide-button-if-user-is-logged-with-laravel-and-vuejs
I can not find any examples for this :(
我找不到任何例子:(
回答by Julian Paolo Dayag
Usually from your controller, you pass the authenticated user object into the view which will then be stored in a javascript variable
通常从您的控制器，您将经过身份验证的用户对象传递到视图中，然后将其存储在 javascript 变量中
Controller:
控制器：
public function index()
{
return view('index', [
'auth_user' => Auth::user()
]);
}
You will know if a user is authenticated if it returns an object or null where null means no user is authenticated.
您将知道用户是否通过身份验证，如果它返回一个对象或 null，其中 null 表示没有用户通过身份验证。
In your blade, assign the auth_userinto a javascript variable:
在您的刀片中，将 分配给auth_user一个 javascript 变量：
<script>
window.auth_user = {!! json_encode($auth_user); !!};
</script>
your vuex store object should atleast look like this:
你的 vuex 商店对象至少应该是这样的：
{
state: {
user: null
},
mutations: {
setAuthUser(state, user) {
state.user = user;
}
},
getters: {
isLoggedIn(state) {
return state.user !== null;
}
}
}
Then in your Vue root component, get the auth_userand save it into the store:
然后在您的 Vue 根组件中，获取auth_user并将其保存到商店中：
<script>
export default {
mounted() {
this.$store.commit('setAuthUser', window.auth_user);
}
}
</script>
You now basically have a gettercalled this.$store.getters.isLoggedInthat you can use in your application for checking if a user is currently logged in.
您现在基本上有一个可以在应用程序中使用的getter调用this.$store.getters.isLoggedIn，用于检查用户当前是否已登录。
e.g:
例如：
回答by DAVID AJAYI
Putting a script within blade file will throw Vue Warning. Let me answer "How to check in a Vue component if a user is authenticated in Laravel" and leave you with your Vuex complexity. Also this method is simpler.
将脚本放在刀片文件中会引发 Vue 警告。让我回答“如果用户在 Laravel 中通过身份验证，如何检查 Vue 组件”并留给您 Vuex 的复杂性。这个方法也比较简单。
So, in your controller:
因此，在您的控制器中：
public function index()
{
return view('index')->with('auth_user', auth()->user());
}
In your blade(main.blade.php):
在你的刀片（main.blade.php）中：
<div class="container">
<example-component :auth_user='@json($auth_user)'></example-component>
</div>
In your vue-component, get your props(ExampleComponent.vue):
在您的 vue 组件中，获取您的道具（ExampleComponent.vue）：
<script>
export default {
props: ['auth_user'],
created () {
console.log(this.auth_user)
}
}
</script>
Returns null if user is not logged in
如果用户未登录，则返回 null
回答by Nensi601
Use axios interceptors. You intercept the access denied http response code and then act accordingly.
使用 axios 拦截器。您拦截访问被拒绝的 http 响应代码，然后采取相应的行动。
window.axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (419 === error.response.status) {
location.reload();
} else {
//Something else you want to do or do nothing
}
});
