前后端分离如何实现用户鉴权？

emmmm.... 就很迷，回答被折叠了。那我完整回答一下。

现在主流的前端权鉴是通过动态添加路由实现的前端权鉴，前端的路由表存在数据库中，后端按照当前登录的用户角色返回对应的用户可操作的路由表，然后通过 addRouters 去动态添加到 vue-router 中。如果你喜欢 element 这个UI库的话，你可以看一下这个 admin 版 👉 Vue-Element-Admin，提供了完整的一套解决方案。权鉴这部分具体思路可以参考这个文件 permission.js

如果不想自己手撸项目的话，可以直接使用 RuoYi 这个开源后台管理系统，前端是使用的 Vue + ElementUI，但是个人觉得它做的稍微差点意思。一是因为是个人项目维护力度稍微弱一些，二是因为作者是后端er，在对于前端的很多功能设计上面会有一些问题。我之前是使用的 Jeecg Boot 这个开源项目，也同样有这样的问题。但是维护的力度会稍微好一些，对于不过UI库是 AntDesign of Vue，会比 ElementUI 更好一些，毕竟 Ele 已经算是废弃状态了，但是AntD Vue 可能对于一些对于前端不太熟悉同学会不太友好。

如果是已经开发的差不多了的项目，不想再折腾了，其实很简单可以直接在前端做好路由表，然后在路由守卫上添加好一些权鉴的功能。最简单的实现你的需求 "鉴权并实现未登录自动跳到首页" 的话，直接把登录时返回的token存储在 localStorage 里面就可以，然后再路由守卫中判断一下就好了。

const whiteList = ['/login']

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token")
  if (!!token||whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')
  }
}

如果说了除了登录的校验，还需要增加角色权鉴的话，也可以把路由表稍微修一下，把登陆返回的用户角色类型也存起来，例如我早期的一个项目就是这样写的权鉴：

import store from './store'
const agent = {
  path: "/agent",
  name: "agent",
  redirect: "/agent/dashboard",
  component: () => import("views/routerView"),
  children: [
    {
      path: "dashboard",
      name: "agent-dashboard",
      component: () => import("views/agent/dashboard")
    },
    //...
  ],
  beforeEnter: (to, from, next) => {
    // 判断是已经登录 并且 角色名称为 `agent`
    if (store.getters.token && store.getters.role === 'agent') {
      next();
    } else {
      store.dispatch('user/logout')
      next("/login");
    }
  }
};