VUE VANT H5项目总结

app.js中的watch监听：刚打开时监视路由变化是否带TOKEN

   watch: {
            //监听路由变化
            '$route': function (to, from) {

                let token = window.localStorage.getItem(utils.tokenKey);
                if (to.matched.some(record => record.meta.requiresauth) && (!token || token === null)) {
                    next({
                        path: '/login',
                        query: { redirect: to.fullpath }
                    })
                } else {
                    // next()
                }

　　

router/index.js中的路由守卫  每个路径是否带权限

  // 导航守卫
    // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
    router.beforeEach((to, from, next) => {
        //如果去往登录页则放行 
        if (to.path === '/') {
            next();
        } else {
            // 从本地存储里获取token
            let token = localStorage.getItem(utils.tokenKey);
            // 判断token是否为空如果为空则跳转到登录页 如果有则放行
            if (token === null || token === '') {
                next({ path: '/' });
            } else {
                next();
            }
        }
    });

　　

request与response拦截器：请求时带上请求头，尤其是后端结合jwtbearer时。后端响应与对一些反馈码做处理

 // request拦截器
    service.interceptors.request.use(function (config) {
        let data = utils.parse(config.data);
        if (data.SystemUserId === 'null') {
            delete data.SystemUserId;
        } else {
            let userInfo = utils.parse(window.localStorage.getItem(utils.userInfoKey) || '{}');
            data.SystemUserId = userInfo.SystemUserId;
            config.data = JSON.stringify(data);
            config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        }
        // debugge

        //判断token是否存在
        if (localStorage.getItem(utils.tokenKey)) {
            // 在请求头中添加token
            config.headers['Authorization'] = 'Bearer ' + localStorage.getItem(utils.tokenKey);
        }

        return config;
    }, function (error) {
        console.log('utils/fetch.js:reject' + error);
        return Promise.reject(error);

    });

    // respone拦截器
    service.interceptors.response.use(function (response) {
        var res = response.data;
        if (response.status === 200) {
            // if (response.request.responseURL) {
            //     if (response.request.responseURL.indexOf('err.aspx') > 0) return response;
            // }

            if (res.code == SUCCESS_CODE) {
                // return Promise.resolve(res)
            }
            // if (res.code === 101) {
            //     // debugger
            //     return Promise.reject(res);
            // }
            // else if (res.code ===101) {
            //     vant.Toast(res.message || '操作失败！101');
            // }
            // 

            return res;
        }

        if (response.status === 204) {
            return response.headers;
        }
        else {
            return Promise.reject(res);
        }


    }, function (e) {
        if (e.response) {
            var res = e.response;
            if (res.status === 401) {
                //Vue.$toast(res);
                vant.Toast(res);

                window.localStorage.removeItem(token_key);
                //授权失败重启应用
                if (window.plus) {
                    plus.runtime.restart();
                }
                router.push({ path: '/login' });
                return Promise.reject(e);
            }
            var data = res.data;
            if (data && data.error && data.error.message) {
                if (res.statusText === "Forbidden") {
                    // Vue.$toast('没有足够的权限：您没有访问这些记录的权限。请联系 Microsoft Dynamics 365 管理员!');
                } else {
                    //Vue.$toast(JSON.stringify(data.error.message));
                    vant.Toast(JSON.stringify(data.error.message));
                }
            } else {
                //Vue.$toast(JSON.stringify(data||e.response));
                vant.Toast(JSON.stringify(data || e.response));
            }
            return Promise.reject(data);
        } else {
            if (e && e.toString().indexOf('timeout')) {
                //超时异常
                var locale = localStorage.getItem('locale') || 'zh';
                if (locale == 'zh') {
                    Vue.$messagebox.alert('网络异常，请联系管理员');
                } else {
                    Vue.$messagebox.alert('Network exception, please contact administrator');
                }
            } else {
                Vue.$messagebox.alert(JSON.stringify(e), '');
            }
            return Promise.reject(e);
        }
    });

　　

此外涉及vuex做状态，变量的存储，尤其是TOKEN.

vue-router做些配置