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/>"vuex"에서 { mapActions } 가져오기;<br/>기본값 내보내기 {</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 라이브러리 소개
"axios"에서 axios 가져오기;
//axios 인스턴스 만들기
const service = axios.create({

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

});
내보내기 기본값({ Vue }) =>

}

src 디렉토리의 index.js 파일에서 방금 캡슐화한 service.js 파일을 Vue 플러그인으로 등록해야 합니다.

'vue'에서 Vue 가져오기

'./service'에서 서비스 가져오기 //서비스 소개

//서비스 플러그인 등록

Vue.use(service, { Vue })

버튼을 클릭하면, 로그인 로직이 실행된 후 로그인 결과 데이터를 확인하고 얻기 위해 백그라운드를 호출해야 합니다. 로그인 결과 데이터는 Vuex에 저장되며 Vue 플러그인 Vuex를 통해 등록됩니다.

src 디렉터리에서 Vuex 관련 작업을 저장할 새 저장소 디렉터리를 만듭니다. 먼저, Vuex의 작업 유형을 정의하기 위해 저장소 디렉터리에 새 type.js 파일을 만듭니다.

//types.js

export const LOGIN_SUCCESS = "LOGIN_SUCCESS"; // 로그인 성공
export const LOGIN_FAIL = "LOGIN_FAIL"; // 로그인 실패

스토어 디렉토리에 새 actions.js 파일을 생성하고 Vuex 액션을 캡슐화하여 Vue 구성 요소에서 이러한 액션을 트리거하고 상태를 업데이트합니다.

import * as types from './types.js'

export default {

Vue.prototype.$axios = service;

}

src/store 디렉토리에서 새 store.js 파일을 생성하고, stata, mutations, actions 및 기타 관련 콘텐츠를 생성합니다.

// store.js

'vue'에서 Vue 가져오기
'vuex'에서 Vuex 가져오기
'./actions.js'에서 액션 가져오기
'./types.js'에서 * 유형으로 가져오기

Vue.use (Vuex)

const store = new Vuex.Store({

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);
        }
    })
})

})

export default store

src 디렉터리의 main.js 파일에서 다음과 같이 store.js를 Vue에 등록해야 합니다.

'vue'에서 Vue 가져오기

'./App.vue'에서 앱 가져오기
'./router'에서 라우터 가져오기
'./store/store.js'에서 스토어 가져오기

Vue.config.productionTip = false

new Vue({

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

}).$mount('#app')

3) 페이지로 이동하여 매개변수 결과를 출력합니다

Vuex에 isLogged 상태 매개변수와 이름을 도입합니다. Vuex 업데이트 상태에 표시됩니다. 로그인 성공 후 라우팅을 통해 새 페이지로 이동할 때 로그인 정보와 출력 결과 매개변수를 새 페이지에 전달해야 합니다.

Vue 프로젝트에서는 라우터 프로그래밍 방법을 선택하여 코드를 통해 새 페이지로 이동할 수 있습니다.

router.js 파일에서 라우팅 및 로그인 확인 상태와 출력 결과 매개변수를 설명하는 두 개의 주요 필드를 정의합니다.

'vue'에서 Vue 가져오기

'vue-router'에서 라우터 가져오기
'./views/Home.vue'에서 홈 가져오기
'./views/Login.vue'에서 로그인 가져오기
Vue.use(Router)
const router = new Router({

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

})

router.beforeEach((to, from, next) => { // 라우팅 스위치 시 페이지 로그인 인증 수행

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

})

로그인 성공 후 언제, 라우터를 사용하여 출력 결과 매개변수를 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!