前后端分离

本项目使用前后端分离的开发模式，前端负责数据展示与用户交互，后端负责提供数据接口，前后端通过 API 进行数据交互。

本项目使用 jwt 解决前后端通信身份验证问题。

原理

用户通过账号密码登录时，后端校验成功后通过秘钥对用户id等信息进行加密生成一个具有时效性的 token 返回给前端。前端每次调用接口时，在接口 header 中携带该 token，后端接受后使用秘钥对其解密获取用户信息，若未被篡改，则可确认是该用户操作。

本项目中

本项目中接口均可携带 token ，若接口无需鉴权，会忽略该 token 。
对于有些可携带可不携带的接口，如影视详情接口，登录用户可获取本人是否收藏、评分等信息；若未登录，则不会返回这些信息；若 token 失效，则按未登录处理。

相关代码

login 接口

// 在 vuex 的 user module 中，登录成功后会将 token 信息写入 vuex
async login({ commit }, loginForm) {
    const { account, password } = loginForm

    let res = await getAdminToken({ account: account.trim(), password })
    
    if(res.code === 200) {
        commit('SET_TOKEN', res.data.token) 
    }
    return res
},

// 写入 Token 信息到本地与 vuex 中
SET_TOKEN: (state, token) => {
    state.token = token
    localStorage.setItem('token', token)
},

axios 配置

// 在请求拦截器中，如果 `vuex` 中存在 token ，则请求时携带上
// 注意，Bearer 后面用户 token 连接处有一个空格
axios.interceptors.request.use(config => {
    if (store.state.user.token) {
        config.headers['Authorization'] = 'Bearer ' + store.state.user.token
    }
    return config
}, function (error) {
    return Promise.reject(error)
})