vue 基于vuex 请求令牌token 刷新令牌token验证

朴灿烈づ我的快乐病毒、 2021-09-08 16:06 564阅读 0赞

store.js

import Vue from "vue"  
import Vuex from "vuex"

/\*\*  
    Vuex持久化存储之vuex-persist  
    Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，  
    Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，  
    只要一刷新页面，数据就丢失了。  
    引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。  
    不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中  
 \*/  
import VuexPersistence from "vuex-persist"

Vue.use(Vuex)

const vuexLocal = new VuexPersistence(\{  
  storage: window.localStorage,  
\})

/\*\*  
 \* State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。  
 \*   
 \* 只能通过 mutations 变更 Store 数据，不可以直接操作 Store 中的数据。  
 \* 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。  
 \*   
 \* actions 用于处理异步任务。  
 \* 如果通过异步操作变更数据，必须通过 actions，而不能使用 mutations，但是在 actions 中还是要通过触发  
 \* mutations 的方式间接变更数据。  
 \*   
 \* getters 用于对 Store 中的数据进行加工处理形成新的数据。  
 \*/

export default new Vuex.Store(\{  
    state: \{  
        access\_token: "",  
        refresh\_token: "",  
    \},  
    mutations: \{  
        setAccessToken(state, param) \{  
            state.access\_token = param  
        \},  
        setRefreshToken(state, param) \{  
            state.refresh\_token = param  
        \},  
        removeAccessToken(state) \{  
            state.access\_token = ''  
        \},  
        removeRefreshToken(state) \{  
            state.refresh\_token = ''  
        \},  
    \},  
    actions: \{  
        setAccessToken(context, param) \{  
            context.commit('setAccessToken', param)  
        \},  
        setRefreshToken(context, param) \{  
            context.commit('setRefreshToken', param)  
        \},  
        removeAccessToken(context) \{  
            context.commit('removeAccessToken')  
        \},  
        removeRefreshToken(context) \{  
            context.commit('removeRefreshToken')  
        \}  
    \},  
    getters: \{  
        getAccessToken(state) \{  
            return state.access\_token  
        \},  
        getRefreshToken(state) \{  
            return state.refresh\_token  
        \}  
    \},  
    plugins: \[vuexLocal.plugin\]  
\})  
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

request.js

import axios from 'axios'  
import store from '@/store'

import \{  
    Toast  
\} from 'vant';  
import router from '@/router/index';

export function request(config) \{  
    // 1.创建axios的实例  
    const instance = axios.create(\{  
        baseURL: 'http://\*\*\*\*\*\*\*\*\*.com',  
        timeout: 5000  
    \})

// 2.axios的拦截器  
    // 2.1.请求拦截的作用  
    instance.interceptors.request.use(config => \{

// 获取token  
        //const token = store.getters.getToken  
        //token && (config.headers.Authorization = token)  
        return config  
    \}, err => \{  
        return Promise.reject(err);  
    \})

// 2.2.响应拦截  
    instance.interceptors.response.use(res => \{  
        if (res.data.code == 100101) \{  
            Toast.success(\{  
                message: res.data.msg,  
                duration: 1.5 \* 1000  
            \})  
            store.dispatch('removeAccessToken')  
            store.dispatch('removeRefreshToken')  
            setTimeout(() => \{  
                router.replace('/login')  
            \}, 1500)  
        \} else if (res.data.code == 100102 || res.data.code == 100103) \{  
            store.dispatch('removeAccessToken')  
            store.dispatch('removeRefreshToken')  
            setTimeout(() => \{  
                router.replace('/login')  
            \}, 1500)  
        \} else if (res.data.code == 100000) \{  
            //处理正确结果  
            if (res.data.usertoken.length != 0) \{  
                store.dispatch('setAccessToken',res.data.usertoken.access\_token)  
                store.dispatch('setRefreshToken',res.data.usertoken.refresh\_token)  
            \}  
            return res.data  
        \} else \{  
            return res.data  
        \}  
    \}, err => \{  
        Toast.fail(\{  
            message: err.message,  
            duration: 1.5 \* 1000  
        \})  
        return Promise.reject(err)  
    \})

// 3.发送真正的网络请求  
    return instance(config)  
\}  
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

</div>  
</template>

import \{  
        get\_report  
    \} from '@/model/home.js'

export default \{  
        name: 'Home',  
        data() \{  
            return \{  
                report:\{\}  
            \}  
        \},  
        components: \{\},  
        created() \{  
            //获取  
            get\_report().then(res => \{  
                if(res.code == 100000)\{  
                    this.report = res.result  
                \}else\{  
                    Toast.fail(\{  
                        message: res.msg,  
                        duration: 1.5 \* 1000  
                    \})  
                \}  
            \});  
        \},  
        methods: \{  
            //将指定的 actions 函数，映射为当前组件的 methods 函数  
            //跳转详情  
            gotodetail(id) \{  
                this.$router.push('/rep/detail/'+id)  
            \}  
        \},  
    \}  
</script>

.wm-baodao \{  
        margin-top: 30px;  
    \}

.wm-baodao p \{  
        font-size: 17px;  
        font-weight: bold;  
        color: \#1989fa;  
        margin: 10px 15px 5px;  
        border-bottom: 1px solid \#1989FA;  
    \}  
</style>