登录流程（管理系统）

是合合呀

已于 2023-12-18 16:29:43 修改

阅读量51

点赞数

文章标签：前端 javascript 开发语言 vue.js elementui

于 2023-11-19 17:10:13 首次发布

本文链接：https://blog.csdn.net/Dl3464/article/details/134407768

版权

本文详细描述了使用Vue.js和Vuex实现登录功能的过程，包括表单验证、用户信息存储、Vuex中的异步和同步操作，以及如何在登录后设置token和在header添加Authorization。还介绍了导航守卫和白名单机制，确保只有登录用户才能访问特定页面。

摘要由CSDN通过智能技术生成

在 header 添加参数 Authorization

导航守卫与白名单

登录流程

1. 样式布局和表单验证，注册接口，验证码接口，点击登录的功能验证（详情看上一篇 ‘ 注册流程 ’ ）

2. vuex 处理用户信息，调用用户信息接口

3. 页面中触发异步操作 调用 vuex 中用户信息 getApi()

4. 导航守卫 与 白名单（有token直接进入系统主页，无token要先进行登录注册）

vuex用户信息

import Vue from 'vue'
import Vuex from 'vuex'
import { getUser } from '@/api/api'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    仓库
    userFrom: {},
  },
  getters: {},
  mutations: {
    处理state
    getUserState(state, paylode) {
      state.userFrom = { ...paylode }
    },
  },
  actions: {
    获取用户
    getUserApi(content) {
      console.log(111,content);
      getUser().then((res) => {
        content.commit('getUserState', res.data)  同步操作，commit()方法，承接上下文处理mutations中的内容
      })
    },
  },
  modules: {},
})

 getLoginApi() {
      getLogin(this.ruleForm).then((res) => {
        if (res.success == true) {
          this.$cookies.set('token',res.data.token)
          this.$message({
            message: '登录成功',
            type: 'success',
          })
          this.$store.dispatch('getUserApi')   异步操作
          this.$router.replace('/home')
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
          })
        }
      })
    },

vuex同步异步操作

this.$store.dispatch('getuserApi')       是 异步操作，在登录中调用

content.commit('getUserState',res.data)  是 同步操作，承接 vuex 上下文 mutations 中的内容

登录向后台发送请求获取数据，使用vuex中action的dispatch去完成了。

其他使用commit即可。

commit => mutations，用来触发同步操作的方法。

dispatch => actions，用来触发异步操作的方法。

登录存token值

登录需要储存token： this.$cookies.set('token',res.data.token)

在 header 添加参数 Authorization

根据后端要求，看是否要 “ 在 header 添加参数 Authorization ”，添加的参数格式要符合后端要求，比如会用到字符串拼接（axios中的请求拦截器）

    在发送请求之前做些什么，根据接口判断要不要Token 
        
    if (VueCookies.get('token')) {
      config.headers.Authorization = `Bearer ${VueCookies.get('token')}`
    }

导航守卫与白名单

  注册页面 ###########################
  {
    path: '/register',
    name: 'Register',
    component: () => import(/* webpackChunkName: "about" */ '../views/RegisterPage.vue'),
    beforeEach: (to, from, next) => {
      if (VueCookies.get('token')) {
        next('/home')
      } else {
        next()
      }
    },  
  },
  登录页面 ###########################
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
    beforeEach: (to, from, next) => {
      if (VueCookies.get('token')) {
        next('/home')
      } else {
        next()
      }
    },
  },
]
白名单 路由的name
const whiteList = ['Login', 'Register']

导航守卫
router.beforeEach((to, from, next) => {
  if (whiteList.includes(to.name)) {
    return next()
  }
  if (VueCookies.get('token')) {
    next()
  } else {
    next('/login')
  }
})