實現的功能：開啟網頁判斷是否登入->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
};

路由的程式碼省略