后台管理项目功能拆分

不同权限登录

所有操作在vuex中全局处理（📍刷新页面后vuex的内容也会丢失，所以需要重复所述操作）

graph TD
账号密码 --> 得token --> 存cookie中
            得token  --> 拉取userinfo接口

用户输入账号密码后向服务端验证，验证通过会拿到服务端返回的token

step①把token存本地cookie，这样下次打开页面或者刷新页面的时候，能记住用户的登录状态

step②使用token调用接口userinfo，这个接口数据是后台管理的，返回用户名、用户对应的权限role等等

权限验证：路由有一个📍meta属性，可以填写该路由页面对应的权限字符串名称role，从而达到权限名与页面的一个匹配。通过📍router.addRoutes动态挂载路由即可。

@/utils/auth：

import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'

export function getToken() {
  return Cookies.get(TokenKey)
}
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
export function removeToken() {
  return Cookies.remove(TokenKey)
}

src/store/modules/user.js: 公共数据token交vuex管理

import { getToken, setToken, removeToken } from '@/utils/auth'
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { name, avatar } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

@/api/user.js: login函数，传入用户数据后post提交数据

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

简历项目写法建议

项目描述：

项目功能

个人工作/职责：

产出数据+结果；
难点+解决；
项目链接

相关知识

🔘cookie

常用的本地存储--cookie

属性/字段

document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"

domain和path

domain 和path 一起限制了 cookie 能够被哪些 url 访问，domain 是域名、path是路径

expires/max-age

expires指定了 cookie 失效的时间点。

例3中的时间表明这个 cookie 将在2017-11-04的16时整失效。

不失效期间：浏览器关闭后此cookie仍会保存在用户的机器中。

max-age在新的http协议中取代expires，多少时间段后失效。

（负值）在浏览器会话结束后失效，即 session，默认值-1；

（正值）表示多少秒后失效；0，则表示删除cookie。

例4中"max-age=10800;"即cookie 将在3小时后失效。

secure

secure是 cookie 的安全标志，通过cookie直接包含一个secure单词来指定，也是cookie中唯一一个非名值对的部分。指定后，cookie只有在使用SSL连接（如HTTPS请求）时才会发送到服务器。默认情况为空，不指定 secure 选项，即不论是 http 请求还是 https 请求，均会发送cookie。

HttpOnly

HttpOnly规定了这个 cookie 只能被服务器访问,不能使用 js 脚本访问。将 cookie 设置成 httponly 可以减轻xss攻击的危害，防止cookie被窃取，以增强cookie的安全性。

不能使用 js 脚本访问：无法读取和修改 httponly cookies

默认情况是不指定的，即可以通过 js 去访问。

如何设置

HTTP cookie，是客户端用来存储数据的一种选项，它既可以在客户端设置也可以在服务器端设置。

客户端设置：

上面↑属性的例子

document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"

服务端设置：

发送一个名为 Set-Cookie 的HTTP头来创建一个cookie，作为 Response Headers 的一部分。如下图所示，每个Set-Cookie 表示一个 cookie（如果有多个cookie,需写多个Set-Cookie），每个属性也是以名/值对的形式（除了secure），属性间以分号加空格隔开。格式如下

document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"

🔘常用的本地存储

cookie
web存储机制：sessionStorage 和 localStorage。

🔘vue.config.js 配置

该文件在项目的根目录下，会被@vue/cli-service自动加载

@配置

  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src') //函数resolve(dir)代表路径：项目文件夹/dir
      }
    }
  },

vue.config.js 配置-官方文档

🔘路由

使用技巧

分模块

如果routers数组内部有太多对象，可以拆成js文件，该文件内部将对象导出即可

导出./modules/table.js

/** When your routing table is too long, you can split it into small modules **/

import Layout from '@/layout'

const tableRouter = {
  path: '/table',
  component: Layout,
  redirect: '/table/complex-table',
  name: 'Table',
  meta: {
    title: 'Table',
    icon: 'table'
  },
  children: [
    {
      path: 'dynamic-table',
      component: () => import('@/views/table/dynamic-table/index'),
      name: 'DynamicTable',
      meta: { title: 'Dynamic Table' }
    },
    {
      path: 'drag-table',
      component: () => import('@/views/table/drag-table'),
      name: 'DragTable',
      meta: { title: 'Drag Table' }
    },
    {
      path: 'inline-edit-table',
      component: () => import('@/views/table/inline-edit-table'),
      name: 'InlineEditTable',
      meta: { title: 'Inline Edit' }
    },
    {
      path: 'complex-table',
      component: () => import('@/views/table/complex-table'),
      name: 'ComplexTable',
      meta: { title: 'Complex Table' }
    }
  ]
}
export default tableRouter

在index.js中引入模块对象

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

/* Layout */
import Layout from '@/layout'
/* Router Modules */
import componentsRouter from './modules/components'
import chartsRouter from './modules/charts'
🔮import tableRouter from './modules/table'
import nestedRouter from './modules/nested'
export const constantRoutes = [  //静态路由
{
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },  
{
    🟡path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  }
],
export const asyncRoutes = [  //动态路由，在meta中添加roles权限
{
    path: '/icon',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/icons/index'),
        name: 'Icons',
        meta: { title: 'Icons', icon: 'icon', noCache: true }
      }
    ]
  },
  /** when your routing map is too long, you can split it into small modules **/
  componentsRouter,
  chartsRouter,
  nestedRouter,
  🔮tableRouter,
  {
    path: '/tab',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/tab/index'),
        name: 'Tab',
        meta: { title: 'Tab', icon: 'tab' }
      }
    ]
  },
  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://github.com/PanJiaChen/vue-element-admin',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },
    // 404 page must be placed at the end !!!静态已经挂载好了，只需要redirect即可
   🟡{ path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history'因为没#，直接写的路径
  // require service support
  📍scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes//只挂载了静态路由
})

const router = createRouter()

📍404放动态路由最后？

原因：静态路由优先级高于动态路由。404监听路由是在默认路由里面的，优先级比动态路由要高，所以刷新后默认先被404接管了。

addRoutes

通过 token 使用🦄getInfo获取用户的 role，根据 role 动态跟路由表 meta.role 进行匹配（动态路由在meta中添加roles权限），形成可访问的路由再在导航守卫router.beforeEach 中，通过 router.addRoutes 动态挂载可访问的路由

src/permission.js

🔮router.beforeEach(async(to, from, next) => {
  NProgress.start()// start progress bar
  document.title = getPageTitle(to.meta.title)// set page title
  const hasToken = getToken()//user has logged in=has token

  if (hasToken) {
    if (to.path === '/login') {// if is logged in,no need to login. redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()📍咋就直接next了
      } else {
        try {
          // if don't get the array roles,get user info
          // roles's form such as: ['developer','editor']
          const { roles } = await store.dispatch('user/🦄getInfo')

          // generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('🔮permission/generateRoutes', roles)
          
          🔮router.addRoutes(accessRoutes)// dynamically add accessible routes

          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } 
  else {/* has no token*/
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()// finish progress bar
})

匹配路由与权限

step1：

若有admin权限，能查看所有的权限，直接选中所有的动态路由；

否则，递归匹配roles和路由，将符合路由的页面对象推入res数组中；

step2：

更新路由数组是将静态路由拼接上动态路由，是在mutations中同步更新

store/permission.js

const actions = {
  generateRoutes({ commit }, roles) {
    return new Promise(resolve => {
      let accessedRoutes
      if (roles.includes('admin')) {//admin是能查看所有的权限，直接选中所有的动态路由
        accessedRoutes = 🔮asyncRoutes || []
      } else {
        accessedRoutes = filterAsyncRoutes(🔮asyncRoutes, roles)
      }
      commit('SET_ROUTES', accessedRoutes)//🔸更新路由数组，是静态路由拼接上动态路由
      resolve(accessedRoutes)
    })
  }
}
//Filter asynchronous routing tables by recursion
export function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }//浅拷贝，只有一层没有嵌套的情况下 是深拷贝
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}
//Use meta.role to determine if the current user has permission
function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return roles.some(role => route.meta.roles.includes(role))
  } else {
    return true
  }
}

//🔸更新路由数组，是静态路由拼接上动态路由
const state = {
  routes: [],
  addRoutes: []
}
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)//更新路由数组，是静态路由拼接上动态路由
  }
}

getInfo

store/modules/ @/api/user.js

import request from '@/utils/request'
export function getInfo(token) {
  return request({
    url: '/vue-element-admin/user/info',
    method: 'get',
    params: { token }
  })
}

@/utils/request就是axios请求数据，并且添加了拦截请求，响应请求之类

📍路由守卫

🔘axios

@/utils/request.js

create an axios instance

import axios from 'axios'
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

request interceptor

do something before request is sent,such as add token

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      🔮config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

response interceptor

If you want to get http information such as headers or status.Please return response => response

usually,we judge the status by HTTP Status Code

service.interceptors.response.use(
  /**
   * Determine the request status by custom code
   */
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })

      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

🔘vuex

mutations是大写函数名