vue+vuex+vue-router 实现登录认证功能

实现的功能：打开网页判断是否登录->token认证失败跳转登录 ->登录认证->存储token->返回原网页。

1.建立store，我这里是放在src/store/store.js文件里面，代码如下。

Vue.use(Vuex)
let store =new Vuex.Store({
    state: {
        loginStatus: 0,
        token:'',
        userName:''
    },
    mutations: {
        loginSuccess(state){
            state.userName = db.get('userName');
            state.loginStatus = 1
        },
        loginFail(state){
            state.loginStatus = 0
        },
        updateToken(state,token){
        
            state.token = token;
            db.set('token',token);
          
        },
        loginOut(state){
            db.remove('token');
            state.loginStatus=0;
            state.token="";
        }
    },
    actions: {
        loginAction({commit},token){

            commit('loginSuccess');
            commit('updateToken',token)
        },
        tokenAction({commit},token){
            commit('updateToken',token)
        },
        loginOutAction({commit}){
            commit('loginOut')
        }

    }
})
// 页面刷新时，重新赋值token
let token =db.get('token');
if (token) {
    store.commit('updateToken',token);
    store.commit('loginSuccess')
}
/* eslint-disable */
export default store

2.Login.vue里面实现登录逻辑。主要代码：

    import { mapActions,mapState } from 'vuex'
    import requset from '../utils/request'

    methods: {
            ...mapActions(['loginAction']),
            onSubmit() {

            },
            submitForm(formName) {
                let self = this;
                this.$refs[formName].validate((valid) => {
                   this.loading=true;
                    requset.api_login(self.form)
                        .then(resp=>{
                            this.loading=false;
                            if(resp.data.code==200){
                               let token = resp.data.data.token.access_token;
                                //存储用户名到数据库。
                                db.set("userName",resp.data.data.user.name);
                                //发送登录成功的action
                                this.loginAction(token);
                                this.$message("验证成功!");
                                this.$router.replace('/');//跳转到首页
                            }else {
                                this.$message({
                                    showClose: true,
                                    message: resp.data.msg,
                                    type: 'error'
                                });
                            }

                        })
                });
            },
        }

3.在main.js文件里加入以下代码:判断store的里面的登录状态，若没有登录则重定向到登录页面

router.beforeEach((to, from, next) => {

    if(to.meta.requiresAuth){
        if (store.state.loginStatus === 1) {
            next();
        } else {
            next("/Login");
        }
    }else  {
        next();
    }
});

4.拦截http请求，直接在main.js里面添加即可，这里用的是axios，请求前把state的token添加上请求头。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {

    let headers ={};
    headers.Authorization = "Bearer "+store.state.token;
    config['headers'] = headers;
    // console.log(headers);
    // 在发送请求之前做些什么
    return config
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    if(response.status==401||response.data.code==401){
        router.replace('/Login')
    }
    // 对响应数据做点什么
    return response
}, function (error) {
    if(error.statusCode==500){

    }
    // 对响应错误做点什么
    return Promise.reject(error)
});

5.db的实现，这里用的是cookies存储token和用户名，db.js代码如下:

import Cookies from 'js-cookies'
let prefix = "";

const  set = (key, value) => {

    let vEnd =3600;//设置cookie的有效期为1小时

    Cookies.setItem(prefix + key, value,vEnd);
};

const get = (key) => {
    let k = prefix + key;
    return Cookies.getItem(k);
};

const remove = (key) =>{
    return Cookies.removeItem(prefix+key)
}

export default {
    set,
    get,
    remove
};

路由的代码省略