如何利用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中文網其他相關文章！