token验证（前端篇）

这里可以用到我自己之前封装好的axios来处理axios请求，

1.登录页面

1.1登录页面login.js接口请求方法

//login.js
import serviceAxios from '../index'
export const login = (data) => {
  return serviceAxios({
    url: '/api/login',
    method: 'post',
    data
  })
}

1.2登录页面重要代码

//把用户名和密码发送给后端进行验证，验证成功后返回token 
const data = await login({ username, password }).then(res => {
      if (res.code === 200) {
        return res.token
      }
    }, err => {
      return Promise.reject(err)
    })
    /*如果data有正确的返回值,将token存储在localStorage,并跳转到My页面，提示登陆成功,否则提示账号或密       码错误，请重新输入 */
    data && localStorage.setItem('token', data) &&  navigate('/My') && message.success('登录成功') : message.error('账号或密码错误，请重新输入')

2.非登录页面请求接口数据

2.1其他页面News.js接口请求方法

//News.js
​
import serviceAxios from '../index'
​
export const getNews = (data) => {
  return serviceAxios({
    url: '/News/News',
    method: 'post',
    data
  })
}

2.2其他页面请求数据

//My.js
​
const getNew = async () => {
    const data = await getNews({ id: 1 }).then(res => {
      if (res.code === 200) {
        return res.data.news
      }
    }, err => {
      return Promise.reject(err)
    })
    //如果data有正确的返回值，则渲染返回的数据，否则提示还未登录，请先登录,这里的插件都是用了antd的，具体使用可以根据自己情况去扩展
    data ? setText(data) : showModal()
  }

\