vue登陆、时间样式、文件上传常见问题

路由导航守卫控制访问权限

//为路由对象添加beforeEach导航守卫
//to要访问的地址，from从哪里来，next放行函数
router.beforeEach((to,from,next)=>{
    //如果要访问登陆页
    if(to.path == '/login') return next();
    //从sessionStorage中获取保存的token值
    const tokenStr = window.sessionStorage.getItem('token');
    //没有token，强制跳转到登陆页
    if(!tokenStr) return next('/login');
    next();//如果有直接放行
})

退出

直接删除token就可以

window.sessionStorage.clear()
this.$router.push('/login')

通过接口获取数据

通过axios请求拦截器添加token，保证拥有获取数据的权限

//请求拦截器
axios.interceptors.request.use(config=>{
    //为请求添加token验证的字段Authorization
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config;
})

记录当前的操作

某些时候需要记住之前的操作，也可以使用sessionStorage

处理时间显示样式

1. 先定义一个全局的时间过滤器

Vue.filter('dataFormat',function(originVal){
    const dt = new Data(originVal);
    const y = dt.getFullYear();
    const m =(dt.getMonth()+1+'').padStart(2,'0');//两位数，不足两位补0
    const d =(dt.getDate()+'').padStart(2,'0');
    
    const hh =(dt.getHours()+'').padStart(2,'0');
    const mm =(dt.getMinutes()+'').padStart(2,'0');
    const ss =(dt.getSeconds()+'').padStart(2,'0');
})

2. 使用过滤器

<template slot-scope='scope'>
	{{scope.row.time|dataFormat}}
</template>

ElementUI上传组件问题

组件中的action属性为上传到服务器的路径，注意这个路径必须是全路径（如：http:127.0.0.1:8000/api/img)，如果是相对路径则默认会上传到前端项目中的相对路径下。

在上传的时候自己封装了ajax而没有使用自定义的axous，所以不会携带token信息。此时需要在其headers属性中增加头信息。

<el-upload :headers="headerObj"></el-upload>

//在data中增加
headerObj:{
    Authorization:window.sessionStorage.getItem('token');
}