Vue后端管理系统用户身份验证封装: 由浅入深，详实可行！

见解分享

2023-09-14 22:17:50

深度剖析 Vue 后端管理系统用户认证封装

为什么要进行用户认证？

用户认证至关重要，因为它可以：

保障数据安全： 防止未经授权的访问，保护敏感信息。
维护用户隐私： 确保个人资料仅被授权用户获取和修改。
实现个性化服务： 根据用户权限提供定制化的服务和内容。

用户认证的常见类型

常见的用户认证类型包括：

基于口令的身份验证： 输入用户名和密码进行验证。
基于令牌的身份验证： 使用服务器签发的令牌进行验证。
基于生物特征的身份验证： 使用指纹、面部识别等生物特征进行验证。
基于行为的身份验证： 分析用户行为模式，如输入习惯和访问模式进行验证。

Vue 后端管理系统用户认证封装核心步骤

1. 安装依赖包

axios：用于 HTTP 请求。
vuex：用于状态管理。
jwt-decode：用于解码 JWT 令牌。

2. 创建 Vuex 模块

// authModule.js
export const authModule = {
  state: {
    user: null,
    authenticated: false,
  },
  mutations: {
    setUser(state, user) { state.user = user; },
    setAuthenticated(state, authenticated) { state.authenticated = authenticated; },
  },
  actions: {
    login({ commit }, { username, password }) {
      return axios.post('/api/login', { username, password })
        .then(({ data }) => {
          const user = data.user;
          const token = data.token;
          commit('setUser', user);
          commit('setAuthenticated', true);
          localStorage.setItem('token', token);
        });
    },
    logout({ commit }) {
      commit('setUser', null);
      commit('setAuthenticated', false);
      localStorage.removeItem('token');
    },
  },
  getters: {
    user: state => state.user,
    authenticated: state => state.authenticated,
  },
};

3. 在 Vue 组件中使用 Vuex 模块

// MyComponent.vue
export default {
  computed: {
    user() { return this.$store.getters['authModule/user']; },
    authenticated() { return this.$store.getters['authModule/authenticated']; },
  },
  methods: {
    login(username, password) { this.$store.dispatch('authModule/login', { username, password }); },
    logout() { this.$store.dispatch('authModule/logout'); },
  },
};

4. 在路由守卫中进行权限控制

// router.js
import { authModule } from './store/authModule';

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!authModule.getters.authenticated) {
      next({ path: '/login', query: { redirect: to.fullPath } });
    } else {
      next();
    }
  } else {
    next();
  }
});