VUE VANT H5项目总结

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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中的路由守卫  每个路径是否带权限

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 导航守卫   // 使用 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时。后端响应与对一些反馈码做处理

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

// 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做些配置