登录-后台管理系统
输入账号和密码,点击登录按钮
login(){
this.$refs.loginForm.validate(async (valid) => {
if(!valid) return;
const { data:res } = await login(this.loginForm)
if(res.meta.status !== 200) return this.$message.error("登录失败! ")
this.$message.success('登录成功')
// 1.将登录成功之后的 token,保存到客户端的sessionStorage 中
setSession("token",res.data.token)
// 2.跳转到后台主页
this.$router.push('/home')
})
}
除去登录接口,其它接口都需要设置请求头
// 项目中除了登录之外的其它API接口,必须在登录之后才能访问
export function request(config){
// 1.创建axios实例
const instance = axios.create({
// phpstudy打开和pm2 start .\app.js --name vue_api_server
baseURL : "http://127.0.0.1:8888/api/private/v1/",
timeout: 5000
});
// 3.请求拦截器
instance.interceptors.request.use(config => {
NProgress.start() //进度条的显示
config.headers.Authorization = getSession('token')
return config
},err => {
console.log(err)
})
// 4.响应拦截器
instance.interceptors.response.use(config => {
NProgress.done()
return config
},err => {
console.log(err)
})
// 2.发送真正的网络请求
return instance(config)
}
只有token存在的情况下,才能进入除去/login以外的链接
const router = new VueRouter({
routes
})
router.beforeEach((to,from,next) => {
if(to.path === '/login') return next()
// 获取token
const tokenStr = getSession("token")
if(!tokenStr) return next('/login')
next()
})
export default router