vue 登录拦截及权限管理，登录页面

亦凉 2022-10-16 08:44 197阅读 0赞

## 一.登录拦截 ##

用户登录成功后服务端返回token的值，然后前端使用axios中请求拦截器`（service.interceptors.request.use）`再每个的请求接口上加上Authorization:token的值，服务端通过这个Authorization来获取token的值，来进行判断token的值是否过期，如果过期则接口返回403,前端得到403的状态，则提示用户返回登录页。

//request.js
    import axios from 'axios';
    import {  Message, MessageBox } from 'element-ui';
    import router from '../router';
    /** * 提示函数 * 禁止点击蒙层、显示一秒后关闭 */
    const tip = msg => { 
    	Message({ 
    		message: msg,
    		duration: 1000
    	})
    }
     
    /** * 跳转登录页 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面 */
    const toLogin = () => { 
    	router.replace({ 
    		path: '/login'
    	});
    }
     
    // 创建axios实例
    const service = axios.create({ 
    	baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    	// withCredentials: true, // send cookies when cross-domain requests
    	timeout: 5000 // request timeout
    })
    // 设置post请求头
    service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
     
    // 请求拦截器
    service.interceptors.request.use(
    	config => { 
    		// 登录流程控制中，根据本地是否存在token判断用户的登录情况
    		// 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
    		// 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
    		// 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
    		const token = localStorage.getItem('token');
    		token && (config.headers.Authorization = token);
    		return config
    	},
    	error => { 
    		// 处理请求错误
    		return Promise.reject(error)
    	}
    )
    // 响应拦截器
    service.interceptors.response.use(
    	//请求成功
    	response => { 
    		const res = response.data;
    		if (res.code !== 200 && res.status !== 200) { 
    			return Promise.reject(res)
    		} else { 
    			return res
    		}
    	},
    	//请求失败
    	error => { 
    		const { 
    			response
    		} = error;
    		if (response) { 
    			// 请求已发出，但是不在30分钟的范围
    			errorHandle(response.status, response.data.message);
    			return Promise.reject(response);
    		} else { 
    			// 处理断网的情况
    			// eg:请求超时或断网时，更新state的network状态
    			// network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
    			// 关于断网组件中的刷新重新获取数据，会在断网组件中说明
    			// store.commit('changeNetwork', false);
    		}
    	}
    )
    /** * 请求失败后的错误统一处理 * @param {Number} status 请求失败的状态码 */
    const errorHandle = (status, other) => { 
    	// 状态码判断
    	switch (status) { 
    		// 401: 未登录状态，跳转登录页
    		case 401:
    			toLogin();
    			break;
    		// 403 token过期
    		// 清除token并跳转登录页
    		case 403:
    			localStorage.removeItem('token');
    			MessageBox({ 
    				message: '登录过期，请重新登录',
    				callback: action => { 
    					toLogin();
    				}
    			})
    			break;
    		// 404请求不存在
    		case 404:
    			tip('请求的资源不存在');
    			break;
    	}
    }
    export default service

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]

//登录页
    <template>
      <div class="login-container loginHome" :style="{'background':'url('+bg+')'}">
        <el-row :gutter="20" class="loginDiv">
          <el-col :span="14" style="text-align:center">
            <img :src="leftImg" width="90%" alt="">
          </el-col>
          <el-col :span="6" :offset="1">
    
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
          <h4 style="margin-top:0;margin-bottom:20px;text-align:center" class="color-primary">合墨商户后台管理系统</h4>
          <el-form-item prop="username">
            <span class="svg-container">
              <svg-icon icon-class="user" />
            </span>
            <el-input
              ref="username"
              v-model="loginForm.phone"
              placeholder="请输入登录账号"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="on"
            />
          </el-form-item>
          <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
            <el-form-item prop="password">
              <span class="svg-container">
                <svg-icon icon-class="password" />
              </span>
              <el-input
                :key="passwordType"
                ref="password"
                v-model="loginForm.pwd"
                :type="passwordType"
                placeholder="请输入密码"
                name="password"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock"
                @blur="capsTooltip = false"
                @keyup.enter.native="handleLogin"
              />
              <span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
              </span>
            </el-form-item>
          </el-tooltip>
          <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登 录</el-button>
          <p class="text-center"><el-button type="text"  @click="$router.push('/resetPwd')">忘记密码？点此重设密码</el-button></p>
        </el-form>
      </el-col>
    </el-row>
    
      </div>
    </template>
    
    <script>
    import {  validUsername } from '@/utils/validate'
    import bg from '@/assets/img/home.jpg'
    import leftImg from '@/assets/img/leftImg.png'
    export default { 
      name: 'Login',
      components: { },
      data() { 
        const validateUsername = (rule, value, callback) => { 
          if (!validUsername(value)) { 
            callback(new Error('Please enter the correct user name'))
          } else { 
            callback()
          }
        }
        const validatePassword = (rule, value, callback) => { 
          if (value.length < 6) { 
            callback(new Error('The password can not be less than 6 digits'))
          } else { 
            callback()
          }
        }
        return { 
          bg:bg,
          leftImg:leftImg,
          loginForm: { 
            phone: '',
            typeAccount: 1,
            pwd: '',
            isApp: 0
          },
          loginRules: { 
            phone: [{  required: true, trigger: 'blur', validator: validateUsername }],
            pwd: [{  required: true, trigger: 'blur', validator: validatePassword }]
          },
          passwordType: 'password',
          capsTooltip: false,
          loading: false,
          redirect: undefined,
          otherQuery: { }
        }
      },
      watch: { 
        $route: { 
          handler: function(route) { 
            const query = route.query
            if (query) { 
              this.redirect = query.redirect
              this.otherQuery = this.getOtherQuery(query)
            }
          },
          immediate: true
        }
      },
      created() { 
        // window.addEventListener('storage', this.afterQRScan)
      },
      mounted() { 
        if (this.loginForm.username === '') { 
          this.$refs.username.focus()
        } else if (this.loginForm.password === '') { 
          this.$refs.password.focus()
        }
      },
      destroyed() { 
        // window.removeEventListener('storage', this.afterQRScan)
      },
      methods: { 
        checkCapslock({ shiftKey, key } = { }) { 
          if (key && key.length === 1) { 
            if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) { 
              this.capsTooltip = true
            } else { 
              this.capsTooltip = false
            }
          }
          if (key === 'CapsLock' && this.capsTooltip === true) { 
            this.capsTooltip = false
          }
        },
        showPwd() { 
          if (this.passwordType === 'password') { 
            this.passwordType = ''
          } else { 
            this.passwordType = 'password'
          }
          this.$nextTick(() => { 
            this.$refs.password.focus()
          })
        },
        handleLogin() { 
          this.$refs.loginForm.validate(valid => { 
            if (valid) { 
              this.loading = true
              this.$store.dispatch('user/login', this.loginForm)
                .then((res) => { 
    
                  if(res.accountType==0){ 
                    this.$router.push({  path: this.redirect || '/', query: this.otherQuery })
                  }else if(res.accountType==1){ 
                    let locationUrl=window.location.href;
                    if(locationUrl.indexOf("/hemo/") > 0){ 
                      locationUrl=locationUrl.replace("/hemo/#/login","/hemo/sp/#/main/account/accountMoney")
                      //locationUrl=locationUrl.replace("/hemo/#/login","/hemo/sp/#/dashboard")
                      window.location.href=locationUrl;
                    }
                  }else if(res.accountType==2){ 
                    let locationUrl=window.location.href;
                    if(locationUrl.indexOf("/hemo/") > 0){ 
                      locationUrl=locationUrl.replace("/hemo/#/login","/hemo/sp/#/main/account/accountAgent")
                      //locationUrl=locationUrl.replace("/hemo/#/login","/hemo/sp/#/dashboard")
                      window.location.href=locationUrl;
                    }
    
                  }
    
                  this.loading = false
                })
                .catch(() => { 
                  this.loading = false
                })
            } else { 
              console.log('error submit!!')
              return false
            }
          })
        },
        getOtherQuery(query) { 
          return Object.keys(query).reduce((acc, cur) => { 
            if (cur !== 'redirect') { 
              acc[cur] = query[cur]
            }
            return acc
          }, { })
        }
    
      }
    }
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221014/6b3c5c2e61434a41b9d73de2cbb5d413.png