当前位置: 代码迷 >> 综合 >> vue+vuex+axios做登录、注册页权限拦截
  详细解决方案

vue+vuex+axios做登录、注册页权限拦截

热度:81   发布时间:2023-11-26 04:15:07.0

现在记录一下我做的过程

1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分

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

2、接下来就是操作src文件,先在 views里写好vew组件(login.vue,regist.vue),写好到router里的index.js里配置好路径

login.vue

 
 
  1. 
         
    <template><div 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></div>
    </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里写好与后端对接的接口地址,在stores里的modules里的user.js里定义user,有state,mutations,action,具体的请求操作写在action里,login.vue或regist.vue调用user.js里写好的请求,getter.js里定义store的getters

api/login.js

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

stores/modules/user.js

 
 
  1. 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:
 
 
  1. const getters={name:state=>state.user.name,
        token:state=>state.user.token
    }
    export default getter

4、在utils里的auth.js里对cookies进行操作,写入,读取,删除用户权限,是否登录的标志等
 
 
  1. 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、在permission.js里写白名单,对白名单以外的跳转进行拦截然后跳转登录,同时判断用户权限,是否登录,等
 
 
  1. 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、utils里的request.js里写拦截码,对后端返回的特定码进行拦截然后做相应的操作
 
 
  1. import axios from 'axios'
    import {Message, MessageBox} from 'element-ui'
    import store from '../store'
    // 创建axios实例 const service = axios.create({baseURL: process.env.BASE_API, // apibase_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
以上就是登录注册的核心部分,写的不对的地方请指教