登录
表单验证用户名与密码,发送登录请求
login() {
// 数据验证
this.$refs.loginFormRef.validate(async valid => {
// 验证不通过
if (!valid) return
// 数据请求
const { data: res } = await this.$https.post('login', this.loginForm)
// 登录失败
if (res.meta.status !== 200) return this.$message.error('登录失败!')
// 登录成功
this.$message.success('登录成功!')
// 缓存token
window.sessionStorage.setItem('token', res.data.token)
// 跳转主页面
this.$router.push('/home')
})
}
路由与路由守卫
通过导航守卫判断用户是否登录
// 路由配置
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/home', component: home }
]
})
// 挂载路由守卫,验证token是否已存在
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next()
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})
退出登录
删除token,跳到登录页
logout() {
window.sessionStorage.clear()
this.$router.push('/login')
}
通过接口获取数据
通过axios请求拦截器添加token,保证拥有获取数据的权限
// main.js中,axios请求拦截器
axios.interceptors.request.use(config => {
// 为请求头对象添加token验证的Authorization字段
config.headers.Authorization = window.sessionStorage.getItem('token')
return config
})