Implement login and registration page permission interception by using vue+vuex+axios technologies (detailed tutorial)

Now I will share with you an article about vue vuex axios to implement login and registration page permission interception. It has a good reference value and I hope it will be helpful to everyone.

There are many templates written on GitHub, and this project is also based on templates.

Now record the process I did

#1. Modify the BASE_API in dev.env.js in the config folder and change the address Change to the public part of the request backend

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

2. The next step is to operate the src file. First, write the vew component (login.vue,regist. vue), write it and configure the path in index.js in the router

login.vue

<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: '/login', component: _import('Login/login'), hidden: true }

3. Write the interface address to connect with the backend in login.js in the api. Define user in user.js in modules in stores, including state, mutations, and action. The specific request operation is written in action. login.vue or register.vue calls the request written in user.js, getter.js Define store getters in

api/login.js

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

##stores/modules/user. 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

getter.js:

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

4. Operate cookies in auth.js in utils, write, read, delete user permissions, sign whether to log in, etc.

import Cookies from 'js-cookies'
export function setName(name) {
 return Cookies.set("name", name);
}
export function getName() {
 return Cookies.get("name");
}
export function setToken(token) {
 return Cookies.set("token", token);
}
export function getToken() {
 return Cookies.get("token");
}

5. Write a whitelist in permission.js, intercept jumps outside the whitelist and jump to login. At the same time, determine user permissions, whether to log in, etc.

import router from './router'
import store from './store'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css'// Progress 进度条样式
import {Message} from 'element-ui'
import {getName, getToken} from "@/utils/auth"; // 验权
const whiteList = ['/login', '/regist']; // 不重定向白名单
router.beforeEach((to, from, next) => {
 NProgress.start();
 if (whiteList.indexOf(to.path) !== -1) {
 next();
 } else {
 if (getToken()==="true") {
  next();
  NProgress.done()
 } else {
  next({path: '/login'});
  NProgress.done()
 }
 }
})
router.afterEach(() => {
 NProgress.done() // 结束Progress
})

6. Write the interception code in request.js in utils, intercept the specific code returned by the backend and perform corresponding operations

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'
import store from '../store'
// 创建axios实例
const service = axios.create({
 baseURL: process.env.BASE_API, // api的base_url
 timeout: 15000     // 请求超时时间
});
// respone拦截器
service.interceptors.response.use(
 response => {
 /**
 * code为非200是抛错 可结合自己业务进行修改
 */
 const res = response.data;
 //const res = response;
 if (res.code !== '200' && res.code !== 200) {
  if (res.code === '4001' || res.code === 4001) {
  MessageBox.confirm('用户名或密码错误，请重新登录', '重新登录', {
   confirmButtonText: '重新登录',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
    location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  if (res.code === '4009' || res.code === 4009) {
  MessageBox.confirm('该用户名已存在，请重新注册！', '重新注册', {
   confirmButtonText: '重新注册',
   cancelButtonText: '取消',
   type: 'warning'
  }).then(() => {
   store.dispatch('FedLogOut').then(() => {
   location.reload()// 为了重新实例化vue-router对象 避免bug
   })
  })
  }
  return Promise.reject('error')
 } else {
  return response.data
 }
 },
 error => {
 Message({
  message: error.message,
  type: 'error',
  duration: 5 * 1000
 });
 return Promise.reject(error)
 }
)
export default service

above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of red-black tree insertion and examples of Javascript implementation methods

js canvas implements sliding puzzle verification Code function

Summary of the method of converting JS from non-array object to array

The above is the detailed content of Implement login and registration page permission interception by using vue+vuex+axios technologies (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!