ここで、ログインおよび登録ページのパーミッションインターセプトを実装するための 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: 'login', data() { const validateUsername = (rule, value, callback) => { if (value.trim().length<1) { callback(new Error('用户名不能为空')) } else { callback() } }; const validatePass = (rule, value, callback) => { if (value.trim().length < 1) { callback(new Error('密码不能为空')) } else { callback() } }; return { loginForm: { name: '', password: '' }, loginRules: { name: [{required: true, trigger: 'blur', validator: validateUsername}], password: [{required: true, trigger: 'blur', validator: validatePass}] }, loading: false, pwdType: 'password' } }, methods: { showPwd() { if (this.pwdType === 'password') { this.pwdType = '' } else { this.pwdType = 'password' } }, handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true; this.$store.dispatch('Login', this.loginForm).then(() => { this.loading = false; this.$router.push({path: '/'}); }).catch((e) => { this.loading = false }) } else { console.log('error submit!!') return false } }) } } } </script>
router/index.js
{ path: '/login', component: _import('Login/login'), 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 '@/utils/request' export function login(name,password) { return request({ url: '/XX/XX', method: 'post', data: { name, password } }) }
5. Permission.js にホワイトリストを書きます。 、インターセプトはホワイトリスト外にジャンプしてからログインにジャンプし、同時にユーザーの権限、ログインするかどうかなどを判断します
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. utilsのrequest.jsにインターセプトコードを書き、インターセプトします。バックエンドによって返された特定のコードを取得し、対応する操作を実行します
上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。 関連記事: js+canvasでスライディングパズル検証コード機能を実装 以上がvue+vuex+axios テクノロジーを使用してログインおよび登録ページの権限インターセプトを実装する (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。const getters={
name:state=>state.user.name,
token:state=>state.user.token
}
export default getter