vue项目实战(一）——资金管理系统-前端02

1.安装element-ui
在前端项目中用到的ui 是饿了么公司的Vue-UI。安装如下：

cnpm i element-ui -S

2.新建client\src\views\Register.vue：

<template>
  <div class="register">
    <selection class="form_container">
      <div class="manage_tip">
        <span class="title">米修在线后台管理系统</span>
      </div>
    </selection>
  </div>
</template>

<script>
export default {
  name: "register",
  components: {}
};
</script>
<style scoped>
.register {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../assets/bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.form_container {
  width: 370px;
  height: 210px;
  position: absolute;
  top: 10%;
  left: 34%;
  padding: 25px;
  border-radius: 5px;
  text-align: center;
}
.form_container .manage_tip .title {
  font-family: "Microsoft YaHei";
  font-weight: bold;
  font-size: 26px;
  color: #fff;
}
.registerForm {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px 40px 20px 20px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px #cccc;
}

.submit_btn {
  width: 100%;
}
</style>

3.在client\src\router.js添加对Register.vue的引用：

import Register from './views/Register.vue'
	//...
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [        
        {
            path: '/register',
            name: 'register',
            component: Register
        },
    ]
})	

4.如何在vuecli3.0实现跨域请求
在client目录下新建http.js文件：

import axios from 'axios';
import {
    Message,
    Loading
} from 'element-ui';
import router from './router';

let loading; //定义loading变量

function startLoading() { //使用Element loading-start 方法
    loading = Loading.service({
        lock: true,
        text: '拼命加载中',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}

function endLoading() { //使用Element loading-close 方法
    loading.close()
}

// 请求拦截
axios.interceptors.request.use(
    config => {
        //加载动画
        startLoading();
        return config;
    },
    eror => {
        return Promise.reject(error);
    }
)


//响应拦截
axios.interceptors.response.use(
    response => {
        //结束加载动画
        endLoading();
        return response;
    },
    error => {
        //错误提醒
        endLoading();
        Message.error(error.response.data);
        return Promise.reject(error);
    }
)
export default axios;

5.实现路由守卫
在client\src\route.js中加入以下代码：

// 添加路由守卫
router.beforeEach((to, from, next) => {
    const isLogin = localStorage.eleToken ? true : false;
    if (to.path == "/login" || to.path == "/register") {
        next();
    } else {
        isLogin ? next() : next("/login");
    }
});

export default router;

6.过期token处理：
在client\src\http.js中添加代码：

// 请求拦截
axios.interceptors.request.use(
    config => {
        //加载动画
        startLoading();
        if (localStorage.eleToken) {
            config.headers.Authorization = localStorage.eleToken;
        }
        return config;
    },
    eror => {
        return Promise.reject(error);
    }
)


//响应拦截
axios.interceptors.response.use(
    response => {
        //结束加载动画
        endLoading();
        return response;
    },
    error => {
        //错误提醒
        endLoading();
        Message.error(error.response.data);
        // 获取错误状态码
        const {
            status
        } = error.response;
        if (status == 401) {
            Message.error('token值无效，请重新登录');
            // 清除token
            localStorage.removeItem('eleToken')
            //页面跳转
            router.push('/login')
        }
        return Promise.reject(error);
    }
)

7.使用jwt-decode模块来解析token.

cnpm install jwt-decode

// 解析token
const decoded = jwt_decode(token);

8.把token存储到vuex：
在store.js中加入：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const types = {
    SET_IS_AUTHENTICATED: 'SET_IS_AUTHENTICATED', //是否通过认证
    SET_USER: 'SET_USER' //用户信息
}
const state = { //需要维护的状态
    isAuthenticated: false,
    user: {}

}
const getters = {
    isAuthenticated: state => state.isAuthenticated,
    user: state => state.user
}
const mutations = {
    [types.SET_IS_AUTHENTICATED](state, isAuthenticated) {
        if (isAuthenticated)
            state.isAuthenticated = isAuthenticated
        else
            state.isAuthenticated = false
    },
    [types.SET_USER](state, user) {
        if (user)
            state.user = user
        else
            state.user = {}
    }
}
const actions = {
    setIsAuthenticated: ({
        commit
    }, isAuthenticated) => {
        commit(types.SET_IS_AUTHENTICATED, isAuthenticated)
    },
    setUser: ({
        commit
    }, user) => {
        commit(types.SET_USER, user)
    },
    clearCurrentState: ({
        commit
    }) => {
        commit(types.SET_IS_AUTHENTICATED, false)
        commit(types.SET_USER, null)
    }

}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

在client\src\view\Login.vue中添加：

//存储数据
            this.$store.dispatch("setIsAuthenticated", !this.isEmpty(decoded));
            this.$store.dispatch("setUser", decoded);