如何利用Vue实现登录页跳转输出参数

随着前端技术的快速发展与普及，越来越多的企业开始应用Vue技术来构建自己的网站。在企业网站的申请中，登录是不可忽略的一个环节，而Vue对于登录功能的实现有其独到的方法。本文将介绍如何利用Vue实现登录页跳转输出参数，进而实现用户登录验证。

1、前期准备

在开始实现跳转输出参数之前，我们需要先完成以下几个步骤：

（1）安装Vue-CLI

Vue-CLI 是Vue官方简化了配置操作的脚手架工具，尤其在项目创建、开发和打包构建等方面，能够快速地让你进入vue的开发中。

安装方法：

npm install -g @vue/cli

（2）创建Vue项目

我们可以在终端中使用命令行创建Vue项目，进入项目根目录下，使用命令行执行如下语句：

vue create my-project

2、实现逻辑

1）登录页面

在登录页面中，我们需要输入用户名和密码进行验证并进行跳转显示。

在Vue项目创建完成后，我们需要导入Vue插件插件 vue-router，用于实现页面跳转。

首先，我们进入项目的src目录，新建login.vue文件，在页面中进行登陆操作。

<div>
    <label>用户名</label>
    <input>
    <label>密码</label>
    <input>
    <button>登录</button>
</div>

<script><br/>import { mapActions } from "vuex";<br/>export default {</script>

data() {
    return {
        username: '',
        password: ''
    }
},
methods: {
    ...mapActions(['login']),
    // 登录
    async submit() {
        await this.login({ username: this.username, password: this.password });
    }
}

}

2) 建立服务器接口进行网站后台操作

我们需要在服务器端提供RESTful API接口，用于处理登录请求，并返回相应的结果数据。在 Vue 项目中，我们可以使用Axios库进行请求接口操作。

在Vue项目根目录中，使用命令行执行：

npm install axios

在Vue项目根目录中，新建一个service.js文件，封装基于Axios的 API 请求过程，并将其作为单独的一个 Vue 插件提供给整个应用程序使用。

// 引入axios库
import axios from "axios";
// 创建axios实例
const service = axios.create({

baseURL: "http://192.168.0.102",
timeout: 10000

});
export default ({ Vue }) => {

Vue.prototype.$axios = service;

}

在src目录下的index.js文件中，我们需要将刚刚封装的service.js文件作为Vue插件进行注册。

import Vue from 'vue'

import service from './service' // 引入service

// 注册 service 插件
Vue.use(service, { Vue })

当我们点击按钮，执行登录逻辑后，需要调用后台进行验证并获取登录结果数据。登录结果数据存储在 Vuex中，通过Vue插件 Vuex进行注册。

在src目录下，新建store目录，用于存储Vuex相关的操作。首先，在store目录下新建types.js文件，用于定义Vuex的操作类型：

// types.js
export const LOGIN_SUCCESS = "LOGIN_SUCCESS"; // 登录成功
export const LOGIN_FAIL = "LOGIN_FAIL"; // 登录失败

在store目录下新建actions.js文件，通过封装Vuex的 action，以便在 Vue 组件中触发这些 action 并更新 state。

import * as types from './types.js'
export default {

login: ({ commit }, param) => new Promise((resolve, reject) => {
    const { username, password } = param;
    this.$axios.post('/login', { username, password }).then(res => {
        const data = res.data;
        if (data.code === 200) {
            commit(types.LOGIN_SUCCESS, { data });
            resolve();
        }
        else {
            commit(types.LOGIN_FAIL, { message: data.message });
            reject(data.message);
        }
    })
})

}

在src/store目录下，新建store.js文件，创建stata、mutations和actions等相关内容。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions.js'
import * as types from './types.js'

Vue.use(Vuex)
const store = new Vuex.Store({

state: {
    info: {
        isLogged: false, // 是否登录
        name: "", // 登录用户名
    }
},
mutations: {
    [types.LOGIN_SUCCESS](state, { data }) {
        state.info.isLogged = true;
        state.info.name = data.name;
    },
    [types.LOGIN_FAIL](state, { message }) {
        state.info.isLogged = false;
        state.info.name = "";
        console.log(message)
    }
},
actions

})

export default store

在src目录中的main.js文件中，我们需要把store.js注册到Vue中，如下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store.js'

Vue.config.productionTip = false
new Vue({

router,
store, // 注册Vuex
render: h => h(App)

}).$mount('#app')

3) 跳转页面并输出参数结果

在Vuex中引入state参数 isLogged和name，当登录成功时，会在Vuex中更新状态。在登录成功后，通过路由跳转到新的页面时，我们需要把登录信息把输出结果参数传递到新的页面中去。

在Vue项目中，跳转方式我们可以选择router的编程方式，通过代码方式跳转到新页面。

在router.js文件中，定义两个关键的字段，用于描述路由和登录验证状态，以及输出结果参数。

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
Vue.use(Router)
const router = new Router({

mode: 'history',
routes: [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { requiresAuth: true } // requireAuth用于表示页面是否需要登录才能访问，本例中仅仅对home页面设置了登录验证
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
]

})
router.beforeEach((to, from, next) => { // 在路由切换时进行页面的登录验证

if (to.matched.some(record => record.meta.requiresAuth)) {
    const isLogged = store.state.info.isLogged;
    if (!isLogged) next({ name: 'login' })
    else next()
} else {
    next()
}

})

在登录成功时，我们需要使用router进行跳转，并将输出结果参数传递到所需的组件中，该组件需要引入 queryString 库：

在登录成功的方法中：

import router from '../router'
import { stringify } from 'querystring'

commit(types.LOGIN_SUCCESS, { data })
const queryString = stringify({ name: data.name }) // 使用 queryString 库，将参数转化为字符串
router.push({ name: "home", query: { authInfo: window.btoa(queryString) }}) // 使用 router 进行跳转，这里使用了 Base64 编码策略，有兴趣的可以了解一下

在Home.vue组件中，我们通过created钩子，获取路由中的输入参数并将其输出。

export default {

name: 'home',
created() {
    if (this.$route.query.authInfo !== undefined) { // 如果存在 authInfo
        const res = atob(this.$route.query.authInfo) // Base64解码操作
        this.formData = qs.parse(res) // 请求参数解码操作
        console.log(this.formData) // 输出参数信息
    }
},
data() {
    return {
        formData: {}
    }
}

}

至此，我们已经成功使用Vue实现登录页跳转输出参数的功能。

结语

本文介绍了如何利用 Vue 实现跳转输出参数，通过 Vue-CLI、Axios、Vuex 和 Vue-Router 等技术栈，实现了基于Vue的网站登录验证功能。当然了，本文的实现是源于作者的参考和思考，如果您也有更好的实现方式，请跟我们一起分享并探讨。

以上是如何利用Vue实现登录页跳转输出参数的详细内容。更多信息请关注PHP中文网其他相关文章！