路由鉴权

src/router/index.js

@@ -6,10 +6,11 @@ import admin from "../pages/admin.vue"
 import axios from "../views/axios.vue"
 Vue.use(VueRouter)
 const routes = [
-    { path: '/', component: index,meta:[{a:1},2,3] },
+    { path: '/', component: index,meta:"admin" },
-    { path: '/a/b/c/d', name: "user", component: user,meta:"user" },
+    { path: '/a/b/c/d', name: "user", component: user,meta:"admin" },
-	{ path: '/axios', name: "user", component: axios,meta:"user" },
+	{ path: '/axios', name: "user", component: axios,meta:"admin" },
-	{ path: '/list', name: "user", component: ()=> import("../views/list.vue"),meta:"user" },
+	{ path: '/login', name: "user", component: ()=>import("../views/login.vue"),meta:"user" },
+	{ path: '/list', name: "user", component: ()=> import("../views/list.vue"),meta:"admin" },
     {
         path: "/admin",meta:"admin", beforeEnter: (to, from, next) => {
             // ...
@@ -24,20 +25,16 @@ const routes = [
             {
                 path:"index",
                 component: () => import("../views/index.vue"),
-                meta:123, beforeEnter: (to, from, next) => {
+                meta:"admin"
-                    // ...
-                    console.log("路由独享")
-                    next()
-                }
 
             },
             {
                 path: "user",
-                component: () => import("../views/user.vue")
+                component: () => import("../views/user.vue"),meta:"admin"
             },
             {
                 path:"admin",
-                component: () => import("../pages/admin.vue")
+                component: () => import("../pages/admin.vue"),meta:"admin"
             }
 
         ]
@@ -62,13 +59,16 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
     // console.log(to,from)
     // this.$route.meta
+    // meta 权限多个
+    // 5个页面没有权限
     console.log(to.meta,"路由元信息")
-    if(to.meta == "admin"){
+    let token = localStorage.getItem("token")
+    if((to.meta == "admin" && token) ||to.path == "/login"){
         console.log("权限验证")
         // 权限验证
         next()
     }else{
-        next()
+        next("/login")
     }
     // if (to.path == "/") {
     //     // alert("你即将到首页")
@@ -85,19 +85,5 @@ router.beforeEach((to, from, next) => {
     // next(false) 停止跳转 这次跳转不生效
     // next('url') or next({path,query,params,name}) 重定向到其他也页面
 })
-router.beforeResolve((to, from, next) => {
-    console.log("解析收尾")
-        next()
 
-    // ...
-    // next() // 继续跳转
-    // next(false) 停止跳转 这次跳转不生效
-    // next('url') or next({path,query,params,name}) 重定向到其他也页面
-})
-//   后置 跳转完成之后
-router.afterEach((to, from) => {
-    console.log(to, from, "后置")
-
-    // ...
-})
 export default router

src/views/login.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <el-form label-position="left" label-width="80px" :model="formLabelAlign">
+      <el-form-item label="用户名">
+        <el-input v-model="formLabelAlign.name"></el-input>
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input v-model="formLabelAlign.pwd"></el-input>
+      </el-form-item>
+      <el-button type="primary" @click="login">登录</el-button>
+    </el-form>
+  </div>
+</template>
+
+<style scoped>
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      formLabelAlign: {
+        name: "",
+        pwd: "",
+      },
+    };
+  },
+  methods: {
+    login() {
+      console.log(this.formLabelAlign);
+      // 请求后台
+      // if(this.formLabelAlign.name == "admin" && this.formLabelAlign.pwd == "123456"){
+      //     localStorage.setItem("token","123")
+      // }
+      this.axios({
+        url: "http://127.0.0.1:3002/login",
+        method: "POST",
+        data: {
+          name: this.formLabelAlign.name,
+          pwd: this.formLabelAlign.pwd,
+        },
+      }).then((res) => {
+        console.log(res);
+        if (res.data.code == 1) {
+          this.$message.error("登录失败");
+        } else {
+          this.$message({
+            message: "登录成功",
+            type: "success",
+          });
+          localStorage.setItem("token", res.data.data.token);
+        }
+      });
+    },
+  },
+};
+</script>