Question

不确定这是否是这个问题的正确位置，因为它更多的是“最佳实践”，而不是技术性的，但我不熟悉使用Vue构建SPA。从目前为止我所看到的Vuex是处理跨组件应用程序数据状态的好工具。我目前所拥有的是为我的用户工作，登录状态和侧抽屉菜单状态（打开/关闭），但在我走下一个兔子洞之前，我想在我的store.js设置上获得一些社区输入。 Auth使用JWT。

使用商店来处理登录，注销和用户信息是一种好习惯吗？我找到的所有教程都不是真实世界（用于计数器或其他东西）。

如果这不是在投票前问这个问题的合适地方，请告诉我正确的Stack Exchange网站。

import Vuex from 'vuex';


export const store = new Vuex.Store({

    state:{
        isLoggedIn: !!localStorage.getItem("jwt_token"),
        user: localStorage.getItem("user")? JSON.parse( localStorage.getItem("user") ) : {},
        showDrawer: false
    },

    mutations:{

        login: state =>{

            state.isLoggedIn = true;

            state.user = JSON.parse( localStorage.getItem("user") );

            //set the Axios header so we pass Auth on the API
            window.axios.defaults.headers.common['Authorization'] = localStorage.getItem("jwt_token");

        }, 

        logout: state =>{

            localStorage.setItem("jwt_token", '');

            localStorage.setItem("user", '');

            state.isLoggedIn = false;

            state.user = {};

            state.showDrawer = false;
        },

        openDrawer: state =>{
            state.showDrawer = true;
        },

        closeDrawer: state =>{
            state.showDrawer = false;
        }
    },

})

Answer 1

嗨，我正在使用这种模式。

https://blog.sqreen.io/authentication-best-practices-vue/

它实现了：

来自应用程序和其他库的隔离身份验证逻辑。
无需为每个API调用显式传递令牌。
处理所有未经身份验证的API调用
具有自动身份验证
限制路线访问
关注点分离
避免副作用
行动调度可以返回承诺

希望有所帮助

Vue / Vuex状态管理的最佳做法

1 个答案: