vue脚手架工程搭建登录，注册页面，遇到的那些坑
1、登录拦截
在路由js里面控制 router->index.js
加拦截器
router.beforeEach((to, from, next) => {
//否则把用户明清掉
if (to.path == '/login') {
if (store.getters.isLogin) {
next('/home');
}else{
next();
}
}else if(to.path == '/register'|| to.path == '/accountAudit'){
next();
} else {
if (store.getters.isLogin) {
// alert('登录成功,跳到首页')
next();
} else {
if (!store.getters.isLogin) {
next('/login');
}
next('/login');
}
}
})
2、访问后端服务器，header加上token，加上过滤器 (mian.js里面加）
//异步请求前在header里加入token
axios.interceptors.request.use(
config => {
if (config.url === '/api/portal/login' || config.url === '/api/portal/register') {
//如果是登录和注册操作，则不需要携带header里面的token
} else {
if (sessionStorage.getItem('token')) {
config.headers.token = sessionStorage.getItem('token');
}
}
return config;
},
error => {
return Promise.reject(error);
});
//异步请求后，判断token是否过期
axios.interceptors.response.use(
response => {
return response;
},
error => {
store.commit("removeToken");
if (error.response) {
if (error.response.status==403) {
router.push('/');
}
}
else{
router.push('/');
}
}
)
3、post访问接口，如果访问都是option，需要加反向代理
proxyTable: {
'/api': {
target: 'http://192.168.2.170', //设置调用接口域名和端口号别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址，组件中我们调接口时直接用/api代替
// 比如我要调用'http://0.0:300/user/add'，直接写‘/api/user/add’即可 代理后地址栏显示/
}
}},
4. vuex store保存的内容，页面刷新之后，没有了。
app.vue加如下内容
created() {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
store.replaceState(Object.assign({}, store.state,JSON.parse(sessionStorage.getItem("store"))));
sessionStorage.removeItem('store');
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(store.state))
})
},