登录-后台管理系统

登录-后台管理系统

输入账号和密码，点击登录按钮

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