ホームページ > ウェブフロントエンド > jsチュートリアル > vue+vuex+axios テクノロジーを使用してログインおよび登録ページの権限インターセプトを実装する (詳細なチュートリアル)

vue+vuex+axios テクノロジーを使用してログインおよび登録ページの権限インターセプトを実装する (詳細なチュートリアル)

亚连
リリース: 2018-05-31 15:56:37
オリジナル
4171 人が閲覧しました

ここで、ログインおよび登録ページのパーミッションインターセプトを実装するための 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) を記述し、ルーター

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 class="title">登录</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: &#39;/login&#39;, component: _import(&#39;Login/login&#39;), hidden: true }
ログイン後にコピー

3. APIのlogin.jsにバックエンドに接続するインターフェースのアドレスを記述し、ストアのモジュールのuser.jsにユーザーを定義します。ステート、ミューテーション、アクションがあり、user.jsに記述されたリクエストをlogin.vueまたはregister.vueが呼び出します

。 api/login.js 4. utils での au th.js での cookie の操作、ユーザー権限の書き込み、読み取り、削除、ログインの有無など

import request from &#39;@/utils/request&#39;
export function login(name,password) {
 return request({
 url: &#39;/XX/XX&#39;,
 method: &#39;post&#39;,
 data: {
  name,
  password
 } 
 })
}
ログイン後にコピー

5. Permission.js にホワイトリストを書きます。 、インターセプトはホワイトリスト外にジャンプしてからログインにジャンプし、同時にユーザーの権限、ログインするかどうかなどを判断します

  import { login,regist,logout } from &#39;@/api/login&#39;
  import { getToken,setToken } from &#39;@/utils/auth&#39;
  const user = {
  state: {
   name:&#39;&#39;,
   token:&#39;&#39;
  },
  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(&#39;SET_NAME&#39;, data.name);
    commit(&#39;SET_TOKEN&#39;, 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(&#39;SET_NAME&#39;, data.name); 
    commit(&#39;SET_TOKEN&#39;, 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(&#39;SET_NAME&#39;, &#39;&#39;);
    commit(&#39;SET_TOKEN&#39;, &#39;&#39;);
    setName(&#39;&#39;);
    setToken(false);
    //removeName();
    //removeToken();
    resolve(response);
   }).catch(error => {
    reject(error)
   })
   })
  }, 
   // 前端 登出 
   FedLogOut({ commit }) { 
   return new Promise(resolve => {
  setToken(false);
 commit(&#39;SET_TOKEN&#39;, false);
 resolve()
   })
   }
  }
  }
  export default user
ログイン後にコピー

6. utilsのrequest.jsにインターセプトコードを書き、インターセプトします。バックエンドによって返された特定のコードを取得し、対応する操作を実行します

const getters={
 name:state=>state.user.name,
 token:state=>state.user.token
}
export default getter
ログイン後にコピー

上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。

関連記事:

赤黒ツリー挿入の詳しい解説とJavaScriptの実装方法例

js+ca​​nvasでスライディングパズル検証コード機能を実装

JS以外に変換する方法まとめ配列オブジェクトを配列に

以上がvue+vuex+axios テクノロジーを使用してログインおよび登録ページの権限インターセプトを実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート