vue+vuex+axios實現登錄、注冊頁權限攔截

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

<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>

{ path: '/login', component: _import('Login/login'), hidden: true } 

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

 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

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