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

一.登录拦截

用户登录成功后服务端返回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

//登录页
<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>