vue+vuex+axios 기술을 사용하여 로그인 및 등록 페이지 권한 차단 구현(자세한 튜토리얼)

이제 로그인 및 등록 페이지 권한 차단을 구현하기 위한 vue+vuex+axios에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

GitHub에는 많은 템플릿이 작성되어 있는데, 이 프로젝트도 템플릿을 기반으로 하고 있습니다.

이제 내가 수행한 프로세스를 기록해 보세요.

1. config 폴더의 dev.env.js에서 BASE_API를 수정하고 주소를 요청 백엔드의 공개 부분으로 변경합니다

BASE_API: '"http://192.168.xx.xx"',

2. 다음 단계는 src 파일을 조작하는 것입니다. 먼저 뷰에 vew 구성 요소(login.vue,register.vue)를 작성한 다음 router

login.vue

에서 index.js에 경로를 구성합니다.

<template>
 <p class="login-container">
  <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
     label-width="0px"
     class="card-box login-form">
   <h3 id="登录">登录</h3>
   <el-form-item prop="name">
  <span class="svg-container svg-container_login">
   <svg-icon icon-class="user"/>
  </span>
    <el-input name="name" disabled type="text" v-model="loginForm.name" autoComplete="on"
      placeholder="用户名"/>
   </el-form-item>
   <el-form-item prop="password">
  <span class="svg-container">
   <svg-icon icon-class="password"></svg-icon>
  </span>
    <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
      autoComplete="on"
      placeholder="密码"></el-input>
    <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye"/></span>
   </el-form-item>
   <el-form-item>
    <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
    登录
    </el-button>
   </el-form-item>
  </el-form>
  </p>
</template>
<script>
 export default {
 name: &#39;login&#39;,
 data() {
  const validateUsername = (rule, value, callback) => {
  if (value.trim().length<1) {
   callback(new Error(&#39;用户名不能为空&#39;))
  } else {
   callback()
  }
  };
  const validatePass = (rule, value, callback) => {
  if (value.trim().length < 1) {
   callback(new Error(&#39;密码不能为空&#39;))
  } else {
   callback()
  }
  };
  return {
  loginForm: {
   name: &#39;&#39;,
   password: &#39;&#39;
  },
  loginRules: {
   name: [{required: true, trigger: &#39;blur&#39;, validator: validateUsername}],
   password: [{required: true, trigger: &#39;blur&#39;, validator: validatePass}]
  },
  loading: false,
  pwdType: &#39;password&#39;
  }
 },
 methods: {
  showPwd() {
  if (this.pwdType === &#39;password&#39;) {
   this.pwdType = &#39;&#39;
  } else {
   this.pwdType = &#39;password&#39;
  }
  },
  handleLogin() {
  this.$refs.loginForm.validate(valid => {
   if (valid) {
   this.loading = true;
   this.$store.dispatch(&#39;Login&#39;, this.loginForm).then(() => {
    this.loading = false;
    this.$router.push({path: &#39;/&#39;});
   }).catch((e) => {
    this.loading = false
   })
   } else {
   console.log(&#39;error submit!!&#39;)
   return false
   }
  })
  }
 }
 }
</script>

router/index.js

{ path: '/login', component: _import('Login/login'), hidden: true }

3 API의 login.js에 백엔드에 연결하기 위한 인터페이스 주소를 작성하고, 스토어 내 모듈의 user.js에 사용자를 정의합니다. . 특정 요청 작업은 user.js에 작성된 요청을 호출하거나 login.vue에 작성됩니다. getter.js

api/login.js 4. au in utils th.js에서 쿠키 조작, 사용자 권한 쓰기, 읽기, 삭제, 로그인 여부 등

import request from '@/utils/request'
export function login(name,password) {
 return request({
 url: '/XX/XX',
 method: 'post',
 data: {
  name,
  password
 } 
 })
}

5. , 화이트리스트 외부로 점프한 후 로그인으로 점프하는 동시에 사용자 권한, 로그인 여부 등을 판단합니다.

  import { login,regist,logout } from '@/api/login'
  import { getToken,setToken } from '@/utils/auth'
  const user = {
  state: {
   name:'',
   token:''
  },
  mutations: {
   SET_NAME: (state, name) => {
   state.name = name;
   },
   SET_TOKEN: (state, token) => {
   state.token = token;
   setToken(token);
   }
  },
  actions: {
   // 登录
   Login({ commit }, userInfo) {
   const name = userInfo.name.trim();
   const password = userInfo.password.trim();
   return new Promise((resolve, reject) => {
    login(name, password).then(response => {
    const data = response.data;
    commit('SET_NAME', data.name);
    commit('SET_TOKEN', data.token);
    setName(data.name);
    setToken(data.token);
    resolve(response); }).catch(error => { reject(error) }) }) },
   // 注册 
   Regist({ commit }, userInfo) { 
   const name= userInfo.name.trim(); 
   const password = userInfo.password.trim(); 
   return new Promise((resolve, reject) => { 
    regist(name, password).then(response => { 
    const data = response.data; 
    commit('SET_NAME', data.name); 
    commit('SET_TOKEN', data.token);
    setName(data.name);setToken(data.token); 
    resolve(response);
    }).catch(error => { 
    reject(error) }) }) }, 
   // 登出 
   LogOut({ commit, state }) {
   return new Promise((resolve, reject) => {
   logout().then(response => {
    commit('SET_NAME', '');
    commit('SET_TOKEN', '');
    setName('');
    setToken(false);
    //removeName();
    //removeToken();
    resolve(response);
   }).catch(error => {
    reject(error)
   })
   })
  }, 
   // 前端 登出 
   FedLogOut({ commit }) { 
   return new Promise(resolve => {
  setToken(false);
 commit('SET_TOKEN', false);
 resolve()
   })
   }
  }
  }
  export default user

6. 유틸리티의 request.js에 차단 코드를 작성하고, 차단합니다. 백엔드에서 반환된 특정 코드를 입력하고 해당 작업을 수행합니다

const getters={
 name:state=>state.user.name,
 token:state=>state.user.token
}
export default getter

위 내용은 제가 모든 사람을 위해 편집한 것입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

레드-블랙 트리 삽입에 대한 자세한 설명과 자바스크립트 구현 방법의 예

js+canvas로 슬라이딩 퍼즐 인증코드 기능 구현

JS 비-검은 트리 변환 방법 요약 객체를 배열로 배열

위 내용은 vue+vuex+axios 기술을 사용하여 로그인 및 등록 페이지 권한 차단 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!