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
登录
登录
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
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"); }
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 })
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
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!