Vue3整合Pinia实现前置路由登录校验详细教程

登录校验是验证用户身份的一种过程，通常在登录系统或应用程序时进行。它确保只有经过授权的用户才能访问特定的资源或执行特定的操作。

登录校验通常包括以下步骤：

1. 用户输入用户名和密码或其他身份验证凭据。
2. 系统验证用户输入的凭据是否与存储在系统中的凭据匹配。
3. 如果凭据匹配，系统将用户登录并授予访问权限。
4. 如果凭据不匹配，系统将拒绝登录并显示错误消息。

本案例通过用户名称与密码进行身份校验。

主要使用技术 vue3+pinia+router 路由，此案例是连接后台实现登录功能，这里就不显示后台的代码了，主要显示前端代码。

主要流程：目前主要有 登录、注册 与 首页面，只有登录才能访问首页面，如果直接在地址栏中输入首页面的请求地址，则直接跳转到登录界面。如果直接访问登录或注册页面是可以的。

具体代码如下：

1. 需要安装内容

npm install vue-router

npm install axios

npm install pinia
npm install pinia-plugin-persist

2. main.js 文件中的配置

import { createApp } from 'vue'
import App from './App.vue'
import Router from './router/index'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'


const pinia = createPinia()
pinia.use(piniaPersist)

const app = createApp(App)
app.use(Router)
app.use(pinia)
app.mount('#app')

3. 状态管理配置：store/user.js

import { defineStore } from 'pinia'

export const userInfoStore = defineStore('userInfo',{
  state: ()=>({
    //-登录状态
    isLogin: false,
    //-登录用户信息
    userInfo: {
      userName: null,
      userPhone: null
    }
  }),
  //-开启持久化
  persist: {
    enabled: true
  }
})

4. 路由配置： router/index.js

import {createRouter,createWebHistory} from 'vue-router'
import { userInfoStore } from '../store/user.js'


const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            redirect: '/login'
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('../views/Login.vue')
        },
        {
            path: '/home',
            name: 'home',
            component: () => import('../views/Home.vue')
        },
        {
            path: '/reg',
            name: 'reg',
            component: () => import('../views/Register.vue')
        },

    ]
})

//-前置守卫路由:登录校验
router.beforeEach((to,from,next)=>{
    const store = userInfoStore()
    //-：获取是否登录的状态
    let isLogin = store.isLogin
    //-:访问的请求不是 login，不是reg 也没有登录
    if(to.name!=='login'&&to.name!=='reg'&&!isLogin){
        next({name: 'login'})
    }else if(to.name=='login'&&isLogin){//-:已经登录了，还在访问登录请求
        next({name: 'home'})
    }else{//否则，该干啥干啥
        next()
    }
})

export default router

5.登录页面（修改登录状态）：Login.vue? =>核心代码

       http.post('/admin/login',{
        adminName: user.username,
        adminPassword: user.password
       }).then((response)=>{
        if(response.data.code==200){
            //-:修改全局的登录状态
            store.isLogin = true
            store.userInfo.userName = response.data.data.adminName
            //-:登录成功之后，跳转到首页面
            router.push('/home')
        }else{
            ElMessage.success(response.data.message)
        }
       })

注意：每次需要关闭浏览器窗口，上文中保存的登录状态才能清空，否则一直在浏览器中存储。

到此，案例整理了完毕！