Vue——复杂vue项目的规范和基础封装，项目中权限问题

## 一个基于vite+vue3+vue+router+vuex+element3+axios+sass的前端项目开发环境搭建
## axios
axios 作为现在最流行的网络请求库，可以直接使用 axios.get 或者 axios.post 去获取数据。但是在项目开发中，业务逻辑有很多配置需要进行统一设置，所以安装完 axios 之后，我们需要做的就是封装项目中的业务逻辑。

首先，在项目在登录成功之后，后端会返回一个 token，用来存储用户的加密信息，我们把 token 放在每一次的 http 请求的 header 中，后端在收到请求之后，会对请求 header 中的 token 进行认证，然后解密出用户的信息，过期时间，并且查询用户的权限后，校验完毕才会返回对应的数据。

所以我们要对所有的 http 请求进行统一拦截，确保在请求发出之前，从本地存储中获取 token，这样就不需要在每个发起请求的组件内去读取本地存储。后端数据如果出错的话，接口还要进行统一拦截，比如接口返回的错误是登录状态过期，那么就需要提示用户跳转到登录页面重新登录。这样，我们就把网络接口中需要统一处理的内容都放在了拦截器中统一处理了。

在下面的代码中，所有接口在请求发出之前，都会使用 getToken 获取 token，然后放在 header 中。在接口返回报错信息的时候，会在调试窗口统一打印报错信息。在项目的组件中，我们只需要直接使用封装好的 axios 即可。


import axios from 'axios'
import { useMsgbox, Message } from 'element3'
import store from '@/store'
import { getToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000, // request timeout
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  },
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      console.log('接口信息报错',res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('接口信息报错' + error) 
    return Promise.reject(error)
  },
)

export default service

## sass
## eslint
命令行中、执行 npx eslint src，接着你就会看到下图所示的报错信息，其中详细告诉你了哪里的代码不合规范。根据报错信息的提示，我们进入到 router/index.js 文件后，删掉第 15 行代码结束的分号就可以解除这个警告。
## git

## 登录权限
使用用户名 dasheng 登录成功之后，我们把用户名、过期日期等重要信息进行加密，生成一个 token 返回给前端。
这个 token 就算是一个钥匙，对于那些需要权限才能读取到的页面数据，前端需要带上这个钥匙才能读取到数据，否则访问那些页面的时候就会显示没有权限。

我们回到前端页面，登录成功后，首先需要做的事情，就是把这个 token 存储在本地存储里面，留着后续发送数据。这一步的实现比较简单，直接把 token 存储到 localStorage 中就可以了。我们拿到这个 token 后，为了进行接口权限认证，要把 token 放在 HTTP 请求的 header 内部。

  {
    url: '/geek-admin/user/login',
    type: 'post',
    response: config => {
      const { username } = config.body
      const token = tokens[username]

      // mock error
      if (user!=='dasheng') {
        return {
          code: 60204,
          message: 'Account and password are incorrect.'
        }
      }

      return {
        code: 20000,
        data: token
      }
    }
  }



我们看下面的代码，在 axios 的请求发出之前，我们在配置中使用 getToken 从 localStorage 中读取 token，放在请求的 header 里发送。由于我们使用了请求拦截的方式，所以所有的后端数据发送的时候，都会带上这个 token，完成受限数据的请求。


service.interceptors.request.use(
  config => {
    const token = getToken()
    // do something before request is sent
    if (token) {
      config.headers.gtoken = token
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

通过上面的操作，我们完成了前端网络请求的 token 限制。但是还有一个需求没有实现，就是用户没有登录某个受限页面的时候，或者说没有 token 的时候，如果直接访问受限页面，比如个人中心，那么就需要让 vue-router 拦截这次页面的跳转。

与 vue-router 拦截页面的跳转，并显示无权限的报错信息相比，直接跳转登录页是现在更流行的交互方式。但这种方式需要在 vue-router 上加一层限制，这层限制就是说，在路由跳转的时候做权限认证，我们把 vue-router 的这个功能称作导航守卫。
我们在 router.beforeEach 函数中设置一个全局的守卫。

router.beforeEach(async (to, from,next) => {
  // canUserAccess() 返回 `true` 或 `false`
  let token = getToken()
  if(!token){
     next('/login')
  }
  return true
})